hyungi/TK-BOM-Project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

💯 컬럼 너비를 백분율로 변경 - 화면 꽉 차게 표시
Some checks failed
SonarQube Analysis / SonarQube Scan (push) Has been cancelled
Details

Browse Source 
- 모든 고정 픽셀 너비를 백분율(%)로 변경
- 화면 너비에 맞게 테이블이 꽉 차도록 설정
- overflow-x: hidden으로 가로 스크롤 제거
- 헤더와 본문이 정확히 동일한 백분율 사용
- 예: PIPE 9개 컬럼 = 5% 8% 12% 8% 10% 20% 12% 15% 10%
- 이제 어떤 화면 크기에서도 헤더와 본문이 완벽히 정렬됨
This commit is contained in:
Hyungi Ahn
2025-10-13 15:44:51 +09:00
parent 5a9274d42b
commit e3d0c4d9a0
1 changed files with 23 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
frontend/src/pages/NewMaterialsPage.css
View File

@@ -289,16 +289,14 @@
cursor: not-allowed;
}
/* 자재 테이블 - 엑셀 스타일 (반응형 제거, 고정 너비 + 스크롤) */
/* 자재 테이블 - 엑셀 스타일 */
.materials-grid {
background: white;
margin: 16px 24px;
overflow: auto;
overflow-y: auto;
overflow-x: hidden;
max-height: calc(100vh - 220px);
border: 1px solid #d1d5db;
border-radius: 4px;
min-width: 1200px; /* 최소 너비 강제 */
width: fit-content; /* 내용에 맞는 너비 */
}
.detailed-grid-header {
@@ -337,7 +335,7 @@
/* PIPE 전용 헤더 - 9개 컬럼 */
.detailed-grid-header.pipe-header {
grid-template-columns: 60px 90px 130px 80px 100px 200px 120px 180px 100px !important;
grid-template-columns: 5% 8% 12% 8% 10% 20% 12% 15% 10% !important;
}
.detailed-grid-header.pipe-header > div,
@@ -352,7 +350,7 @@
/* PIPE 전용 행 - 9개 컬럼 */
.detailed-material-row.pipe-row {
grid-template-columns: 60px 90px 130px 80px 100px 200px 120px 180px 100px !important;
grid-template-columns: 5% 8% 12% 8% 10% 20% 12% 15% 10% !important;
}
.detailed-material-row.pipe-row .material-cell {
@@ -365,7 +363,7 @@
/* SPECIAL 전용 헤더 - 10개 컬럼 */
.detailed-grid-header.special-header {
grid-template-columns: 60px 90px 150px 80px 100px 180px 120px 120px 180px 100px;
grid-template-columns: 5% 8% 14% 8% 10% 18% 12% 12% 18% 5%;
}
@@ -382,21 +380,21 @@
/* SPECIAL 전용 행 - 10개 컬럼 */
.detailed-material-row.special-row {
grid-template-columns: 60px 90px 150px 80px 100px 180px 120px 120px 180px 100px;
grid-template-columns: 5% 8% 14% 8% 10% 18% 12% 12% 18% 5%;
}
/* BOLT 전용 헤더 - 9개 컬럼 */
.detailed-grid-header.bolt-header {
grid-template-columns: 60px 90px 130px 80px 100px 200px 120px 180px 100px;
grid-template-columns: 5% 8% 12% 8% 10% 20% 12% 15% 10%;
}
/* BOLT 전용 행 - 9개 컬럼 */
.detailed-material-row.bolt-row {
grid-template-columns: 60px 90px 130px 80px 100px 200px 120px 180px 100px;
grid-template-columns: 5% 8% 12% 8% 10% 20% 12% 15% 10%;
}
@@ -435,14 +433,14 @@
/* U-BOLT 전용 헤더 - 8개 컬럼 */
.detailed-grid-header.ubolt-header {
grid-template-columns: 60px 90px 130px 80px 180px 120px 180px 100px;
grid-template-columns: 5% 10% 15% 10% 20% 12% 18% 10%;
}
/* U-BOLT 전용 행 - 8개 컬럼 */
.detailed-material-row.ubolt-row {
grid-template-columns: 60px 90px 130px 80px 180px 120px 180px 100px;
grid-template-columns: 5% 10% 15% 10% 20% 12% 18% 10%;
}
@@ -483,14 +481,14 @@
/* SUPPORT 전용 헤더 - 9개 컬럼 */
.detailed-grid-header.support-header {
grid-template-columns: 60px 90px 150px 80px 100px 180px 120px 180px 100px;
grid-template-columns: 5% 8% 14% 8% 10% 18% 12% 15% 10%;
}
/* SUPPORT 전용 행 - 9개 컬럼 */
.detailed-material-row.support-row {
grid-template-columns: 60px 90px 150px 80px 100px 180px 120px 180px 100px;
grid-template-columns: 5% 8% 14% 8% 10% 18% 12% 15% 10%;
}
@@ -527,7 +525,7 @@
/* 플랜지 전용 헤더 - 10개 컬럼 */
.detailed-grid-header.flange-header {
grid-template-columns: 60px 90px 100px 80px 100px 100px 180px 100px 180px 100px;
grid-template-columns: 5% 8% 10% 8% 10% 10% 18% 10% 15% 6%;
}
@@ -544,7 +542,7 @@
/* 플랜지 전용 행 - 10개 컬럼 */
.detailed-material-row.flange-row {
grid-template-columns: 60px 90px 100px 80px 100px 100px 180px 100px 180px 100px;
grid-template-columns: 5% 8% 10% 8% 10% 10% 18% 10% 15% 6%;
}
@@ -559,7 +557,7 @@
/* 피팅 전용 헤더 - 10개 컬럼 */
.detailed-grid-header.fitting-header {
grid-template-columns: 60px 90px 180px 80px 80px 100px 180px 100px 180px 100px;
grid-template-columns: 5% 8% 18% 8% 8% 10% 18% 10% 15% 0%;
}
@@ -576,7 +574,7 @@
/* 피팅 전용 행 - 10개 컬럼 */
.detailed-material-row.fitting-row {
grid-template-columns: 60px 90px 180px 80px 80px 100px 180px 100px 180px 100px;
grid-template-columns: 5% 8% 18% 8% 8% 10% 18% 10% 15% 0%;
}
@@ -591,7 +589,7 @@
/* 밸브 전용 헤더 - 9개 컬럼 (스케줄 제거, 타입 너비 증가) */
.detailed-grid-header.valve-header {
grid-template-columns: 60px 180px 120px 80px 80px 180px 100px 180px 100px;
grid-template-columns: 5% 18% 12% 8% 8% 18% 10% 15% 6%;
}
@@ -608,7 +606,7 @@
/* 밸브 전용 행 - 9개 컬럼 (스케줄 제거, 타입 너비 증가) */
.detailed-material-row.valve-row {
grid-template-columns: 60px 180px 120px 80px 80px 180px 100px 180px 100px;
grid-template-columns: 5% 18% 12% 8% 8% 18% 10% 15% 6%;
}
@@ -623,7 +621,7 @@
/* 가스켓 전용 헤더 - 11개 컬럼 (타입 좁게, 상세내역 넓게, 두께 추가) */
.detailed-grid-header.gasket-header {
grid-template-columns: 60px 90px 100px 80px 80px 120px 180px 80px 100px 180px 100px;
grid-template-columns: 5% 8% 10% 7% 7% 10% 18% 7% 10% 15% 3%;
}
@@ -640,7 +638,7 @@
/* 가스켓 전용 행 - 11개 컬럼 (타입 좁게, 상세내역 넓게, 두께 추가) */
.detailed-material-row.gasket-row {
grid-template-columns: 60px 90px 100px 80px 80px 120px 180px 80px 100px 180px 100px;
grid-template-columns: 5% 8% 10% 7% 7% 10% 18% 7% 10% 15% 3%;
}
@@ -868,7 +866,7 @@
/* UNKNOWN 전용 헤더 - 5개 컬럼 */
.detailed-grid-header.unknown-header {
grid-template-columns: 60px 100px 1fr 180px 100px;
grid-template-columns: 5% 10% 1fr 20% 10%;
}
@@ -885,7 +883,7 @@
/* UNKNOWN 전용 행 - 5개 컬럼 */
.detailed-material-row.unknown-row {
grid-template-columns: 60px 100px 1fr 180px 100px;
grid-template-columns: 5% 10% 1fr 20% 10%;
}