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 
- 모든 카테고리에 minmax() 적용으로 내용에 맞게 컬럼 자동 확장
- 헤더와 본문에 동일한 padding: 6px 4px 적용
- 모든 margin 제거하고 순수 grid로 구성
- materials-grid에 외곽 border 추가
- 엑셀처럼 명확한 셀 구분선
- 텍스트가 길어도 잘리지 않고 컬럼이 자동 확장됨
This commit is contained in:
Hyungi Ahn
2025-10-13 15:25:11 +09:00
parent 0ed1047839
commit fa032e95c6
1 changed files with 20 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -330,7 +330,7 @@
/* PIPE 전용 헤더 - 9개 컬럼 */ /* PIPE 전용 헤더 - 9개 컬럼 */
.detailed-grid-header.pipe-header { .detailed-grid-header.pipe-header {
grid-template-columns: 60px 90px 130px 80px 100px 250px 120px 200px 100px !important; grid-template-columns: 60px 90px minmax(130px, auto) 80px 100px minmax(200px, auto) 120px minmax(180px, auto) 100px !important;
} }
.detailed-grid-header.pipe-header > div, .detailed-grid-header.pipe-header > div,
@@ -345,7 +345,7 @@
/* PIPE 전용 행 - 9개 컬럼 */ /* PIPE 전용 행 - 9개 컬럼 */
.detailed-material-row.pipe-row { .detailed-material-row.pipe-row {
grid-template-columns: 60px 90px 130px 80px 100px 250px 120px 200px 100px !important; grid-template-columns: 60px 90px minmax(130px, auto) 80px 100px minmax(200px, auto) 120px minmax(180px, auto) 100px !important;
} }
.detailed-material-row.pipe-row .material-cell { .detailed-material-row.pipe-row .material-cell {
@@ -358,7 +358,7 @@
/* SPECIAL 전용 헤더 - 10개 컬럼 */ /* SPECIAL 전용 헤더 - 10개 컬럼 */
.detailed-grid-header.special-header { .detailed-grid-header.special-header {
grid-template-columns: 60px 90px 150px 80px 100px 200px 120px 120px 200px 100px; grid-template-columns: 60px 90px minmax(150px, auto) 80px 100px minmax(180px, auto) 120px 120px minmax(180px, auto) 100px;
} }
@@ -375,21 +375,21 @@
/* SPECIAL 전용 행 - 10개 컬럼 */ /* SPECIAL 전용 행 - 10개 컬럼 */
.detailed-material-row.special-row { .detailed-material-row.special-row {
grid-template-columns: 60px 90px 150px 80px 100px 200px 120px 120px 200px 100px; grid-template-columns: 60px 90px minmax(150px, auto) 80px 100px minmax(180px, auto) 120px 120px minmax(180px, auto) 100px;
} }
/* BOLT 전용 헤더 - 9개 컬럼 */ /* BOLT 전용 헤더 - 9개 컬럼 */
.detailed-grid-header.bolt-header { .detailed-grid-header.bolt-header {
grid-template-columns: 60px 90px 130px 80px 100px 250px 120px 200px 100px; grid-template-columns: 60px 90px minmax(130px, auto) 80px 100px minmax(200px, auto) 120px minmax(180px, auto) 100px;
} }
/* BOLT 전용 행 - 9개 컬럼 */ /* BOLT 전용 행 - 9개 컬럼 */
.detailed-material-row.bolt-row { .detailed-material-row.bolt-row {
grid-template-columns: 60px 90px 130px 80px 100px 250px 120px 200px 100px; grid-template-columns: 60px 90px minmax(130px, auto) 80px 100px minmax(200px, auto) 120px minmax(180px, auto) 100px;
} }
@@ -428,14 +428,14 @@
/* U-BOLT 전용 헤더 - 8개 컬럼 */ /* U-BOLT 전용 헤더 - 8개 컬럼 */
.detailed-grid-header.ubolt-header { .detailed-grid-header.ubolt-header {
grid-template-columns: 60px 90px 130px 80px 200px 120px 200px 100px; grid-template-columns: 60px 90px minmax(130px, auto) 80px minmax(180px, auto) 120px minmax(180px, auto) 100px;
} }
/* U-BOLT 전용 행 - 8개 컬럼 */ /* U-BOLT 전용 행 - 8개 컬럼 */
.detailed-material-row.ubolt-row { .detailed-material-row.ubolt-row {
grid-template-columns: 60px 90px 130px 80px 200px 120px 200px 100px; grid-template-columns: 60px 90px minmax(130px, auto) 80px minmax(180px, auto) 120px minmax(180px, auto) 100px;
} }
@@ -476,14 +476,14 @@
/* SUPPORT 전용 헤더 - 9개 컬럼 */ /* SUPPORT 전용 헤더 - 9개 컬럼 */
.detailed-grid-header.support-header { .detailed-grid-header.support-header {
grid-template-columns: 60px 90px 150px 80px 100px 200px 120px 200px 100px; grid-template-columns: 60px 90px minmax(150px, auto) 80px 100px minmax(180px, auto) 120px minmax(180px, auto) 100px;
} }
/* SUPPORT 전용 행 - 9개 컬럼 */ /* SUPPORT 전용 행 - 9개 컬럼 */
.detailed-material-row.support-row { .detailed-material-row.support-row {
grid-template-columns: 60px 90px 150px 80px 100px 200px 120px 200px 100px; grid-template-columns: 60px 90px minmax(150px, auto) 80px 100px minmax(180px, auto) 120px minmax(180px, auto) 100px;
} }
@@ -520,7 +520,7 @@
/* 플랜지 전용 헤더 - 10개 컬럼 */ /* 플랜지 전용 헤더 - 10개 컬럼 */
.detailed-grid-header.flange-header { .detailed-grid-header.flange-header {
grid-template-columns: 60px 90px 100px 80px 100px 100px 180px 100px 200px 100px; grid-template-columns: 60px 90px minmax(100px, auto) 80px 100px 100px minmax(180px, auto) 100px minmax(180px, auto) 100px;
} }
@@ -537,7 +537,7 @@
/* 플랜지 전용 행 - 10개 컬럼 */ /* 플랜지 전용 행 - 10개 컬럼 */
.detailed-material-row.flange-row { .detailed-material-row.flange-row {
grid-template-columns: 60px 90px 100px 80px 100px 100px 180px 100px 200px 100px; grid-template-columns: 60px 90px minmax(100px, auto) 80px 100px 100px minmax(180px, auto) 100px minmax(180px, auto) 100px;
} }
@@ -552,7 +552,7 @@
/* 피팅 전용 헤더 - 10개 컬럼 */ /* 피팅 전용 헤더 - 10개 컬럼 */
.detailed-grid-header.fitting-header { .detailed-grid-header.fitting-header {
grid-template-columns: 60px 90px 180px 80px 80px 100px 180px 100px 200px 100px; grid-template-columns: 60px 90px minmax(180px, auto) 80px 80px 100px minmax(180px, auto) 100px minmax(180px, auto) 100px;
} }
@@ -569,7 +569,7 @@
/* 피팅 전용 행 - 10개 컬럼 */ /* 피팅 전용 행 - 10개 컬럼 */
.detailed-material-row.fitting-row { .detailed-material-row.fitting-row {
grid-template-columns: 60px 90px 180px 80px 80px 100px 180px 100px 200px 100px; grid-template-columns: 60px 90px minmax(180px, auto) 80px 80px 100px minmax(180px, auto) 100px minmax(180px, auto) 100px;
} }
@@ -584,7 +584,7 @@
/* 밸브 전용 헤더 - 9개 컬럼 (스케줄 제거, 타입 너비 증가) */ /* 밸브 전용 헤더 - 9개 컬럼 (스케줄 제거, 타입 너비 증가) */
.detailed-grid-header.valve-header { .detailed-grid-header.valve-header {
grid-template-columns: 60px 180px 120px 80px 80px 180px 100px 200px 100px; grid-template-columns: 60px minmax(180px, auto) 120px 80px 80px minmax(180px, auto) 100px minmax(180px, auto) 100px;
} }
@@ -601,7 +601,7 @@
/* 밸브 전용 행 - 9개 컬럼 (스케줄 제거, 타입 너비 증가) */ /* 밸브 전용 행 - 9개 컬럼 (스케줄 제거, 타입 너비 증가) */
.detailed-material-row.valve-row { .detailed-material-row.valve-row {
grid-template-columns: 60px 180px 120px 80px 80px 180px 100px 200px 100px; grid-template-columns: 60px minmax(180px, auto) 120px 80px 80px minmax(180px, auto) 100px minmax(180px, auto) 100px;
} }
@@ -616,7 +616,7 @@
/* 가스켓 전용 헤더 - 11개 컬럼 (타입 좁게, 상세내역 넓게, 두께 추가) */ /* 가스켓 전용 헤더 - 11개 컬럼 (타입 좁게, 상세내역 넓게, 두께 추가) */
.detailed-grid-header.gasket-header { .detailed-grid-header.gasket-header {
grid-template-columns: 60px 90px 100px 80px 80px 120px 200px 80px 100px 200px 100px; grid-template-columns: 60px 90px minmax(100px, auto) 80px 80px minmax(120px, auto) minmax(180px, auto) 80px 100px minmax(180px, auto) 100px;
} }
@@ -633,7 +633,7 @@
/* 가스켓 전용 행 - 11개 컬럼 (타입 좁게, 상세내역 넓게, 두께 추가) */ /* 가스켓 전용 행 - 11개 컬럼 (타입 좁게, 상세내역 넓게, 두께 추가) */
.detailed-material-row.gasket-row { .detailed-material-row.gasket-row {
grid-template-columns: 60px 90px 100px 80px 80px 120px 200px 80px 100px 200px 100px; grid-template-columns: 60px 90px minmax(100px, auto) 80px 80px minmax(120px, auto) minmax(180px, auto) 80px 100px minmax(180px, auto) 100px;
} }
@@ -861,7 +861,7 @@
/* UNKNOWN 전용 헤더 - 5개 컬럼 */ /* UNKNOWN 전용 헤더 - 5개 컬럼 */
.detailed-grid-header.unknown-header { .detailed-grid-header.unknown-header {
grid-template-columns: 60px 100px 1fr 200px 100px; grid-template-columns: 60px 100px 1fr minmax(180px, auto) 100px;
} }
@@ -878,7 +878,7 @@
/* UNKNOWN 전용 행 - 5개 컬럼 */ /* UNKNOWN 전용 행 - 5개 컬럼 */
.detailed-material-row.unknown-row { .detailed-material-row.unknown-row {
grid-template-columns: 60px 100px 1fr 200px 100px; grid-template-columns: 60px 100px 1fr minmax(180px, auto) 100px;
} }