fix: 전화 주문접수표(일괄) 높이 제한 + 헤더/합계 고정 스크롤
표가 화면에 맞는 높이(약 52vh)로 표시되고 나머지 품목은 스크롤로 보이게 한다. 스크롤 시 2행 그룹 헤더는 상단에, 합계 행은 하단에 sticky로 고정. - 2번째 헤더행 top 오프셋은 JS가 첫 헤더행 offsetHeight로 계산(zoom 무관). - 컨테이너 padding 제거로 헤더 위쪽 틈으로 행이 비치는 현상 방지.
This commit is contained in:
@@ -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; }
|
||||
</style>
|
||||
<div class="border border-gray-300 rounded-lg p-2 overflow-auto">
|
||||
<div class="phone-batch-wrap border border-gray-300 rounded-lg overflow-auto">
|
||||
<table class="w-full data-table text-sm phone-batch-table">
|
||||
<colgroup>
|
||||
<col style="width:8rem"/> <!-- 구분: 최장 라벨("대형폐기물 스티커") 기준 고정폭 -->
|
||||
@@ -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(); });
|
||||
})();
|
||||
})();
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user