diff --git a/app/Views/bag/order_phone.php b/app/Views/bag/order_phone.php index 250c259..4880fee 100644 --- a/app/Views/bag/order_phone.php +++ b/app/Views/bag/order_phone.php @@ -150,8 +150,14 @@ unset($g); /* 행·열 간격 축소 — 한 화면에 전체 품목이 보이도록 (피드백 #13) */ table.phone-batch-table th, table.phone-batch-table td { padding: 0.2rem 0.35rem; } table.phone-batch-table .item-qty-input { padding-top: 0.1rem; padding-bottom: 0.1rem; } + /* 스크롤 시 2행 그룹 헤더 + 합계 행 고정. --hdr-row1-h는 JS가 첫 헤더행 높이로 설정. */ + .phone-batch-wrap { max-height: 52vh; } + table.phone-batch-table thead th { position: sticky; z-index: 3; background: #f3f4f6; } + table.phone-batch-table thead tr:first-child th { top: 0; } + table.phone-batch-table thead tr:last-child th { top: var(--hdr-row1-h, 1.6rem); } + table.phone-batch-table tfoot td { position: sticky; bottom: 0; z-index: 2; background: #f9fafb; box-shadow: inset 0 1px 0 #e5e7eb; } -
+
@@ -448,6 +454,20 @@ unset($g); updateShopInfo(); recalcAllRows(); + + // 스크롤 시 두 번째 헤더행이 첫 번째 헤더행 바로 아래에 붙도록 오프셋 계산. + // offsetHeight는 화면 zoom(텍스트 크기)과 무관한 레이아웃 px라 배율이 바뀌어도 정확하다. + (function () { + const tbl = document.querySelector('table.phone-batch-table'); + if (!tbl) return; + const r1 = tbl.querySelector('thead tr:first-child'); + function setHeaderOffset() { + if (r1) tbl.style.setProperty('--hdr-row1-h', r1.offsetHeight + 'px'); + } + setHeaderOffset(); + window.addEventListener('resize', setHeaderOffset); + window.addEventListener('storage', function (e) { if (e.key === 'jrj_font_scale') setHeaderOffset(); }); + })(); })();