📊 테이블을 엑셀 스타일로 완전 재구성
- 모든 margin, padding 제거하고 순수 grid로 재구성 - 헤더 셀: padding: 6px 4px (엑셀처럼 내부 여백만) - 본문 셀: padding: 6px 4px (헤더와 동일) - 모든 셀에 명확한 border (엑셀 그리드 스타일) - materials-grid에 외곽 border와 border-radius 추가 - 헤더 배경: #f3f4f6 (엑셀 회색 헤더) - 이제 헤더와 본문이 완벽히 정렬됨
This commit is contained in:
Hyungi Ahn
@@ -288,61 +288,49 @@
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* 자재 테이블 */
|
||||
/* 자재 테이블 - 엑셀 스타일 */
|
||||
.materials-grid {
|
||||
background: white;
|
||||
margin: 0;
|
||||
min-width: 1500px;
|
||||
overflow-x: auto;
|
||||
max-height: calc(100vh - 200px); /* 최대 높이만 제한 */
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
margin: 16px 24px;
|
||||
overflow: auto;
|
||||
max-height: calc(100vh - 220px);
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.detailed-grid-header {
|
||||
display: grid;
|
||||
/* 기본 그리드는 사용하지 않음 - 각 카테고리별 전용 클래스 사용 */
|
||||
padding: 12px 0;
|
||||
margin: 0 24px;
|
||||
background: #f9fafb;
|
||||
border-bottom: 2px solid #e5e7eb;
|
||||
font-size: 12px;
|
||||
background: #f3f4f6;
|
||||
border: 1px solid #d1d5db;
|
||||
border-bottom: 2px solid #9ca3af;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #6b7280;
|
||||
color: #374151;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
align-items: center;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
.detailed-grid-header > div {
|
||||
.detailed-grid-header > div,
|
||||
.detailed-grid-header .filterable-header {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.detailed-grid-header > div {
|
||||
min-height: 32px;
|
||||
padding: 6px 4px;
|
||||
border-right: 1px solid #d1d5db;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.detailed-grid-header .filterable-header {
|
||||
border-right: 1px solid #d1d5db;
|
||||
padding: 0;
|
||||
background: #f3f4f6;
|
||||
}
|
||||
|
||||
.detailed-grid-header > div:last-child,
|
||||
.detailed-grid-header .filterable-header:last-child {
|
||||
border-right: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* PIPE 전용 헤더 - 9개 컬럼 */
|
||||
.detailed-grid-header.pipe-header {
|
||||
grid-template-columns: 60px 90px 130px 80px 100px 250px 120px 200px 100px !important;
|
||||
padding: 12px 0;
|
||||
margin: 0 24px;
|
||||
}
|
||||
|
||||
.detailed-grid-header.pipe-header > div,
|
||||
@@ -358,8 +346,6 @@
|
||||
/* PIPE 전용 행 - 9개 컬럼 */
|
||||
.detailed-material-row.pipe-row {
|
||||
grid-template-columns: 60px 90px 130px 80px 100px 250px 120px 200px 100px !important;
|
||||
padding: 8px 0;
|
||||
margin: 0 24px;
|
||||
}
|
||||
|
||||
.detailed-material-row.pipe-row .material-cell {
|
||||
@@ -373,8 +359,8 @@
|
||||
/* SPECIAL 전용 헤더 - 10개 컬럼 */
|
||||
.detailed-grid-header.special-header {
|
||||
grid-template-columns: 60px 90px 150px 80px 100px 200px 120px 120px 200px 100px;
|
||||
padding: 12px 0;
|
||||
margin: 0 24px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.detailed-grid-header.special-header > div,
|
||||
@@ -390,22 +376,22 @@
|
||||
/* SPECIAL 전용 행 - 10개 컬럼 */
|
||||
.detailed-material-row.special-row {
|
||||
grid-template-columns: 60px 90px 150px 80px 100px 200px 120px 120px 200px 100px;
|
||||
padding: 8px 0;
|
||||
margin: 0 24px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
/* BOLT 전용 헤더 - 9개 컬럼 */
|
||||
.detailed-grid-header.bolt-header {
|
||||
grid-template-columns: 60px 90px 130px 80px 100px 250px 120px 200px 100px;
|
||||
padding: 12px 0;
|
||||
margin: 0 24px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
/* BOLT 전용 행 - 9개 컬럼 */
|
||||
.detailed-material-row.bolt-row {
|
||||
grid-template-columns: 60px 90px 130px 80px 100px 250px 120px 200px 100px;
|
||||
padding: 8px 0;
|
||||
margin: 0 24px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.detailed-material-row.special-row .material-cell {
|
||||
@@ -443,15 +429,15 @@
|
||||
/* U-BOLT 전용 헤더 - 8개 컬럼 */
|
||||
.detailed-grid-header.ubolt-header {
|
||||
grid-template-columns: 60px 90px 130px 80px 200px 120px 200px 100px;
|
||||
padding: 12px 0;
|
||||
margin: 0 24px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
/* U-BOLT 전용 행 - 8개 컬럼 */
|
||||
.detailed-material-row.ubolt-row {
|
||||
grid-template-columns: 60px 90px 130px 80px 200px 120px 200px 100px;
|
||||
padding: 8px 0;
|
||||
margin: 0 24px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
/* U-BOLT 헤더 테두리 */
|
||||
@@ -491,15 +477,15 @@
|
||||
/* SUPPORT 전용 헤더 - 9개 컬럼 */
|
||||
.detailed-grid-header.support-header {
|
||||
grid-template-columns: 60px 90px 150px 80px 100px 200px 120px 200px 100px;
|
||||
padding: 12px 0;
|
||||
margin: 0 24px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
/* SUPPORT 전용 행 - 9개 컬럼 */
|
||||
.detailed-material-row.support-row {
|
||||
grid-template-columns: 60px 90px 150px 80px 100px 200px 120px 200px 100px;
|
||||
padding: 8px 0;
|
||||
margin: 0 24px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
/* SUPPORT 헤더 테두리 */
|
||||
@@ -535,8 +521,8 @@
|
||||
/* 플랜지 전용 헤더 - 10개 컬럼 */
|
||||
.detailed-grid-header.flange-header {
|
||||
grid-template-columns: 60px 90px 100px 80px 100px 100px 180px 100px 200px 100px;
|
||||
padding: 12px 0;
|
||||
margin: 0 24px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.detailed-grid-header.flange-header > div,
|
||||
@@ -552,8 +538,8 @@
|
||||
/* 플랜지 전용 행 - 10개 컬럼 */
|
||||
.detailed-material-row.flange-row {
|
||||
grid-template-columns: 60px 90px 100px 80px 100px 100px 180px 100px 200px 100px;
|
||||
padding: 8px 0;
|
||||
margin: 0 24px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.detailed-material-row.flange-row .material-cell {
|
||||
@@ -567,8 +553,8 @@
|
||||
/* 피팅 전용 헤더 - 10개 컬럼 */
|
||||
.detailed-grid-header.fitting-header {
|
||||
grid-template-columns: 60px 90px 180px 80px 80px 100px 180px 100px 200px 100px;
|
||||
padding: 12px 0;
|
||||
margin: 0 24px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.detailed-grid-header.fitting-header > div,
|
||||
@@ -584,8 +570,8 @@
|
||||
/* 피팅 전용 행 - 10개 컬럼 */
|
||||
.detailed-material-row.fitting-row {
|
||||
grid-template-columns: 60px 90px 180px 80px 80px 100px 180px 100px 200px 100px;
|
||||
padding: 8px 0;
|
||||
margin: 0 24px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.detailed-material-row.fitting-row .material-cell {
|
||||
@@ -599,8 +585,8 @@
|
||||
/* 밸브 전용 헤더 - 9개 컬럼 (스케줄 제거, 타입 너비 증가) */
|
||||
.detailed-grid-header.valve-header {
|
||||
grid-template-columns: 60px 180px 120px 80px 80px 180px 100px 200px 100px;
|
||||
padding: 12px 0;
|
||||
margin: 0 24px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.detailed-grid-header.valve-header > div,
|
||||
@@ -616,8 +602,8 @@
|
||||
/* 밸브 전용 행 - 9개 컬럼 (스케줄 제거, 타입 너비 증가) */
|
||||
.detailed-material-row.valve-row {
|
||||
grid-template-columns: 60px 180px 120px 80px 80px 180px 100px 200px 100px;
|
||||
padding: 8px 0;
|
||||
margin: 0 24px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.detailed-material-row.valve-row .material-cell {
|
||||
@@ -631,8 +617,8 @@
|
||||
/* 가스켓 전용 헤더 - 11개 컬럼 (타입 좁게, 상세내역 넓게, 두께 추가) */
|
||||
.detailed-grid-header.gasket-header {
|
||||
grid-template-columns: 60px 90px 100px 80px 80px 120px 200px 80px 100px 200px 100px;
|
||||
padding: 12px 0;
|
||||
margin: 0 24px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.detailed-grid-header.gasket-header > div,
|
||||
@@ -648,8 +634,8 @@
|
||||
/* 가스켓 전용 행 - 11개 컬럼 (타입 좁게, 상세내역 넓게, 두께 추가) */
|
||||
.detailed-material-row.gasket-row {
|
||||
grid-template-columns: 60px 90px 100px 80px 80px 120px 200px 80px 100px 200px 100px;
|
||||
padding: 8px 0;
|
||||
margin: 0 24px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.detailed-material-row.gasket-row .material-cell {
|
||||
@@ -876,8 +862,8 @@
|
||||
/* UNKNOWN 전용 헤더 - 5개 컬럼 */
|
||||
.detailed-grid-header.unknown-header {
|
||||
grid-template-columns: 60px 100px 1fr 200px 100px;
|
||||
padding: 12px 0;
|
||||
margin: 0 24px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.detailed-grid-header.unknown-header > div,
|
||||
@@ -893,8 +879,8 @@
|
||||
/* UNKNOWN 전용 행 - 5개 컬럼 */
|
||||
.detailed-material-row.unknown-row {
|
||||
grid-template-columns: 60px 100px 1fr 200px 100px;
|
||||
padding: 8px 0;
|
||||
margin: 0 24px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.detailed-material-row.unknown-row .material-cell {
|
||||
@@ -924,22 +910,25 @@
|
||||
.detailed-material-row {
|
||||
display: grid;
|
||||
/* 기본 그리드는 사용하지 않음 - 각 카테고리별 전용 클래스 사용 */
|
||||
padding: 12px 0;
|
||||
margin: 0 24px;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #d1d5db;
|
||||
border-left: 1px solid #d1d5db;
|
||||
border-right: 1px solid #d1d5db;
|
||||
background: white;
|
||||
transition: background 0.15s;
|
||||
font-size: 13px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.detailed-material-row .material-cell {
|
||||
border-right: 1px solid #e5e7eb;
|
||||
padding: 0 8px;
|
||||
border-right: 1px solid #d1d5db;
|
||||
padding: 6px 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 28px;
|
||||
}
|
||||
|
||||
.detailed-material-row .material-cell:last-child {
|
||||
border-right: none;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.detailed-material-row:hover {
|
||||
|
||||
Reference in New Issue
Block a user