/* ============================================================================ WAR ROOM P4 — ระบบตารางกลาง (Data Table System) · ธีม Minimal ---------------------------------------------------------------------------- แนวคิดการออกแบบ • ลดเส้น ลดกล่อง ลดเงา — ใช้ "เส้นบาง + ที่ว่าง" แบ่งข้อมูลแทนกรอบทึบ • สีถูกเก็บไว้ใช้เฉพาะจุดที่มีความหมาย (สถานะ / ระดับสิทธิ์ / ปุ่มอันตราย) • ตัวอักษรชุดเดียว ขนาดเดียว ทั้งระบบ • "ตารางเลื่อนในกรอบ ไม่ใช่ทั้งหน้าเลื่อน" — หัวเรื่อง ฟิลเตอร์ หัวตาราง และแถบแบ่งหน้าอยู่กับที่ ผู้ใช้กดหน้าถัดไปได้ทันทีไม่ต้องเลื่อนไปหา โครงสร้าง .wrt-shell กรอบสูงเท่าจอ (flex column) .wrt-head หัวเรื่อง / การ์ดสรุป — ไม่เลื่อน .wrt-tools ฟิลเตอร์ + ปุ่มเครื่องมือ — ไม่เลื่อน .wrt-body พื้นที่เลื่อน (flex:1) table.wrt ตาราง (หัวตารางเกาะบน) .wrt-foot จำนวนรายการ + แบ่งหน้า — ไม่เลื่อน ใช้แบบเบา (หน้า dashboard ที่ตารางเป็นแค่ส่วนหนึ่ง) — ไม่ต้องมี .wrt-shell แค่ใส่ .wrt-body ให้กล่องที่เลื่อนได้ และ .wrt ให้ ก็พอ Breakpoint มาตรฐาน 3 ค่าเท่านั้น ≤768px iPad แนวตั้ง / มือถือ → สลับเป็นการ์ดอัตโนมัติ ≤1180px iPad แนวนอน / โน้ตบุ๊กเล็ก → ตารางแบบแน่นขึ้น >1180px คอมพิวเตอร์ → ตารางเต็ม ============================================================================ */ :root { /* ความสูงแถว — 44px คือขนาดเล็กสุดที่นิ้วกดได้แม่นบนจอสัมผัส */ --wrt-row-h: 44px; --wrt-cell-py: .6rem; --wrt-cell-px: .9rem; --wrt-font: .84rem; --wrt-head-font: .75rem; /* จานสีแบบ minimal — เทาอมฟ้า 4 ระดับ + ทองเป็น accent เพียงสีเดียว */ --wrt-bg: #ffffff; --wrt-head-bg: #f5f7fb; /* พื้นหัวตาราง — tint อ่อนพอให้แยกจากเนื้อตาราง */ --wrt-head-fg: #5b6982; /* ตัวอักษรหัวตาราง */ --wrt-line: #eceff5; /* เส้นคั่นแถว */ --wrt-line-str: #dfe4ec; /* เส้นใต้หัวตาราง / ขอบกล่อง */ --wrt-hover: #f7f9fc; --wrt-selected: #fdf8ec; --wrt-accent: #c8960c; --wrt-ink: #1e293b; --wrt-ink-soft: #64748b; --wrt-ink-dim: #94a3b8; --wrt-navy: #0d1b4b; --wrt-radius: 12px; /* รัศมีมุมโค้ง — ใช้ร่วมกันทั้งระบบ */ --wrt-topbar-h: 64px; } /* ══════════════════════════════════════════════════════════════════════════ 1. โครงหน้าจอ — ล็อกความสูงเท่าจอ ══════════════════════════════════════════════════════════════════════════ */ /* ใส่ที่ ของหน้าที่ใช้เลย์เอาต์เต็มจอ warroom-theme.css ตั้ง body { padding-top:64px; padding-left:220px } ไว้เป็น "ค่าสำรอง" สำหรับหน้าที่ไม่มี .wr-main-content — หน้าที่มีแล้วต้องล้างทิ้ง ไม่งั้นระยะถูกนับสองรอบ (ขอบซ้ายกลายเป็น 440px และสูงเกินจอ 64px จนแถบแบ่งหน้าตกขอบล่าง) */ body.wrt-app { overflow: hidden; padding-top: 0 !important; padding-left: 0 !important; } body.wrt-app .wr-main-content { padding-bottom: 0 !important; height: 100dvh; box-sizing: border-box; overflow: hidden; } .wrt-shell { display: flex; flex-direction: column; /* 100dvh = ความสูงจอ "จริง" บน iPad/มือถือ (หักแถบเบราว์เซอร์ที่ยุบ-ขยายได้แล้ว) */ height: calc(100dvh - var(--wrt-topbar-h)); min-height: 420px; overflow: hidden; gap: .9rem; padding: 1.1rem 0 0; box-sizing: border-box; } @supports not (height: 100dvh) { .wrt-shell { height: calc(100vh - var(--wrt-topbar-h)); } } .wrt-head, .wrt-tools, .wrt-foot { flex: 0 0 auto; } /* พื้นที่เลื่อน — min-height:0 จำเป็นมาก ไม่งั้น flex item จะไม่ยอมหดแล้วดันหน้ายาว */ .wrt-body { flex: 1 1 auto; min-height: 0; overflow: auto; background: var(--wrt-bg); border: 1px solid var(--wrt-line-str); border-radius: var(--wrt-radius); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; /* เลื่อนสุดตารางแล้วไม่ไปดึงทั้งหน้าต่อ */ } /* ══════════════════════════════════════════════════════════════════════════ 2. หัวเรื่องของหน้า ══════════════════════════════════════════════════════════════════════════ */ .wrt-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; } .wrt-head h1 { font-size: 1.25rem; font-weight: 600; color: var(--wrt-navy); letter-spacing: -.01em; display: flex; align-items: center; gap: .5rem; margin: 0; } .wrt-head h1 i { color: var(--wrt-ink-dim); font-size: .95em; } .wrt-head .wrt-sub { font-size: .8rem; color: var(--wrt-ink-dim); margin: .15rem 0 0; } /* การ์ดสรุป — เส้นบางเส้นเดียว ไม่มีเงา ไม่มีแถบสี ให้ "ตัวเลข" เป็นพระเอก */ .wrt-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; width: 100%; } .wrt-kpi { border: 1px solid var(--wrt-line-str); border-radius: 10px; background: var(--wrt-bg); padding: .65rem .9rem; } .wrt-kpi-n { font-size: 1.5rem; font-weight: 600; line-height: 1.2; color: var(--wrt-navy); font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .wrt-kpi-t { font-size: .75rem; color: var(--wrt-ink-dim); margin-top: .1rem; } .wrt-kpi--accent .wrt-kpi-n { color: var(--wrt-accent); } .wrt-kpi--good .wrt-kpi-n { color: #15803d; } .wrt-kpi--warn .wrt-kpi-n { color: #b45309; } .wrt-kpi--bad .wrt-kpi-n { color: #b91c1c; } /* ══════════════════════════════════════════════════════════════════════════ 3. แถบเครื่องมือ / ฟิลเตอร์ — ไม่มีกล่อง มีแค่ช่องกรอกลอยบนพื้น ══════════════════════════════════════════════════════════════════════════ */ .wrt-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; } .wrt-tools input[type="search"], .wrt-tools input[type="text"], .wrt-tools input[type="date"], .wrt-tools select { height: 38px; padding: 0 .75rem; border: 1px solid var(--wrt-line-str); border-radius: 8px; font-size: .85rem; background: var(--wrt-bg); color: var(--wrt-ink); font-family: inherit; } .wrt-tools input[type="search"] { min-width: 220px; flex: 1 1 240px; max-width: 400px; } .wrt-tools input::placeholder { color: var(--wrt-ink-dim); } .wrt-tools input:focus, .wrt-tools select:focus { outline: none; border-color: var(--wrt-ink-dim); box-shadow: 0 0 0 3px rgba(148,163,184,.16); } .wrt-tools-right { margin-left: auto; display: flex; align-items: center; gap: .35rem; } .wrt-btn { height: 38px; padding: 0 .75rem; border: 1px solid var(--wrt-line-str); border-radius: 8px; background: var(--wrt-bg); color: var(--wrt-ink-soft); font-size: .8rem; font-weight: 500; font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; transition: color .15s, border-color .15s, background .15s; } .wrt-btn:hover { background: var(--wrt-hover); color: var(--wrt-ink); border-color: var(--wrt-ink-dim); } .wrt-btn.is-active { color: var(--wrt-accent); border-color: var(--wrt-accent); } .wrt-btn--primary { background: var(--wrt-navy); border-color: var(--wrt-navy); color: #fff; font-weight: 600; } .wrt-btn--primary:hover { background: #16295f; border-color: #16295f; color: #fff; } .wrt-btn:disabled { opacity: .4; cursor: not-allowed; } /* เมนูลอย (ความหนาแน่น / เลือกคอลัมน์) */ .wrt-menu { position: relative; } .wrt-menu-pop { position: absolute; top: calc(100% + .35rem); right: 0; z-index: 60; min-width: 232px; max-height: 342px; overflow: auto; background: var(--wrt-bg); border: 1px solid var(--wrt-line-str); border-radius: 10px; box-shadow: 0 10px 28px rgba(13,27,75,.10); padding: .35rem; display: none; } .wrt-menu.is-open .wrt-menu-pop { display: block; } .wrt-menu-label { font-size: .7rem; font-weight: 600; color: var(--wrt-ink-dim); padding: .4rem .6rem .25rem; } .wrt-menu-item { display: flex; align-items: center; gap: .5rem; padding: .45rem .6rem; border-radius: 6px; font-size: .85rem; cursor: pointer; color: var(--wrt-ink); user-select: none; } .wrt-menu-item:hover { background: var(--wrt-hover); } .wrt-menu-item.is-active { color: var(--wrt-accent); font-weight: 600; } .wrt-menu-item input { accent-color: var(--wrt-navy); width: 16px; height: 16px; } .wrt-menu-sep { height: 1px; background: var(--wrt-line); margin: .35rem .3rem; } /* ══════════════════════════════════════════════════════════════════════════ 4. ตาราง ══════════════════════════════════════════════════════════════════════════ */ table.wrt { width: 100%; border-collapse: separate; /* separate เท่านั้นที่หัวตารางแบบเกาะบนวาดเส้นได้ถูก */ border-spacing: 0; font-size: var(--wrt-font); color: var(--wrt-ink); background: var(--wrt-bg); } /* ── หัวตาราง — พื้นขาว ตัวอักษรเทา เส้นใต้เส้นเดียว ── */ table.wrt thead th { position: sticky; top: 0; z-index: 3; font-size: var(--wrt-head-font); font-weight: 600; /* หัวคอลัมน์อยู่กึ่งกลางทุกตาราง — ตารางสรุปส่วนใหญ่เป็นตัวเลขที่จัดกึ่งกลางอยู่แล้ว ถ้าหัวชิดซ้ายจะไม่ตรงกับข้อมูลข้างล่างจนอ่านเทียบคอลัมน์ยาก */ text-align: center; padding: .75rem var(--wrt-cell-px); vertical-align: middle; } /* หัวตารางแถวเดียว — ไม่ให้ตัดบรรทัด คอลัมน์จะได้ไม่แคบผิดปกติ */ table.wrt thead tr:first-child:last-child th { white-space: nowrap; } /* หัวตารางหลายชั้น (ตารางสรุป) — ต้องขึ้นบรรทัดใหม่ได้ ไม่งั้นหัวกลุ่มยาว ๆ อย่าง "ผู้ป่วยจิตเวชจากการใช้สารเสพติด ที่มีชื่ออยู่ใน บสต." จะล้นออกนอกเซลล์แล้วถูกตัดหายไปครึ่งประโยค */ table.wrt thead tr:first-child:not(:last-child) th, table.wrt thead tr:not(:first-child) th { white-space: normal; } /* สีหัวตาราง — ใส่เฉพาะตารางที่ไม่ได้กำหนดสีเอง (ดูหมายเหตุในส่วนที่ 12) */ table.wrt:not(.wrt-keep-head) thead th { background: var(--wrt-head-bg); color: var(--wrt-head-fg); border-bottom: 1px solid var(--wrt-line-str); } /* เส้นใต้หัวตารางไม่ขาดตอนเวลาเลื่อน (border ของ sticky cell จะหลุด) */ table.wrt:not(.wrt-keep-head) thead th::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--wrt-line-str); } /* ── เซลล์ข้อมูล — ไม่มีลายสลับสี ใช้เส้นบางคั่นอย่างเดียว ── */ table.wrt tbody td { padding: var(--wrt-cell-py) var(--wrt-cell-px); border-bottom: 1px solid var(--wrt-line); vertical-align: middle; height: var(--wrt-row-h); box-sizing: border-box; } table.wrt tbody tr:last-child td { border-bottom: none; } table.wrt tbody tr { transition: background .12s; } table.wrt tbody tr:hover { background: var(--wrt-hover); } table.wrt tbody tr.is-selected { background: var(--wrt-selected); } /* ตัวเลขให้ความกว้างหลักเท่ากันทุกแถว — เทียบค่าตามคอลัมน์ได้ด้วยตา */ table.wrt .wrt-num, table.wrt td[data-type="number"] { text-align: right; font-variant-numeric: tabular-nums; } table.wrt .wrt-center { text-align: center; } table.wrt .wrt-wrap { white-space: normal; min-width: 170px; } table.wrt .wrt-nowrap { white-space: nowrap; } table.wrt .wrt-dim { color: var(--wrt-ink-dim); } /* บรรทัดรองในเซลล์ (อีเมลใต้ชื่อ / ชื่อ สภ. ใต้ ภ.จว.) */ table.wrt tbody td small, table.wrt .wrt-sub2 { display: block; font-size: .75rem; color: var(--wrt-ink-dim); line-height: 1.45; } /* ── หัวตารางกดเรียงลำดับได้ ── */ table.wrt th.wrt-sortable { cursor: pointer; user-select: none; padding-right: 1.5rem; } table.wrt th.wrt-sortable:hover { color: var(--wrt-ink); } table.wrt th.wrt-sortable::before { content: "\F282"; /* bootstrap-icons: chevron-expand */ font-family: "bootstrap-icons"; position: absolute; right: .55rem; top: 50%; transform: translateY(-50%); font-size: .7rem; opacity: .25; } table.wrt th.wrt-sortable[aria-sort="ascending"]::before { content: "\F235"; opacity: 1; color: var(--wrt-accent); } table.wrt th.wrt-sortable[aria-sort="descending"]::before { content: "\F229"; opacity: 1; color: var(--wrt-accent); } /* ── ตรึงคอลัมน์ต้น/ท้ายเวลาเลื่อนซ้าย-ขวา ────────────────────────────── ตารางที่คอลัมน์เยอะย่อมกว้างเกินจอ ถ้าปล่อยให้เลื่อนเฉย ๆ ผู้ใช้จะ "หลงแถว" (เลื่อนไปขวาแล้วไม่รู้ว่าแถวนี้ของใคร) และ "กดปุ่มไม่ถึง" จึงตรึงคอลัมน์ชื่อไว้ซ้าย และตรึงคอลัมน์ปุ่มจัดการไว้ขวาเสมอ ค่า left/right ของแต่ละคอลัมน์คำนวณให้โดย js/warroom-table.js (ความกว้างเปลี่ยนตามเนื้อหา จึงคำนวณด้วย CSS ล้วนไม่ได้) */ table.wrt th.wrt-pin-start, table.wrt td.wrt-pin-start, table.wrt th.wrt-pin-end, table.wrt td.wrt-pin-end { position: sticky; z-index: 2; background: var(--wrt-bg); } table.wrt thead th.wrt-pin-start, table.wrt thead th.wrt-pin-end { z-index: 4; } table.wrt:not(.wrt-keep-head) thead th.wrt-pin-start, table.wrt:not(.wrt-keep-head) thead th.wrt-pin-end { background: var(--wrt-head-bg); } /* เงาบอกขอบเขตที่ตรึงไว้ — โผล่เฉพาะตอนที่เลื่อนจนมีอะไรถูกบังจริง */ table.wrt.is-scrolled-x th.wrt-pin-edge-start, table.wrt.is-scrolled-x td.wrt-pin-edge-start { box-shadow: 10px 0 12px -10px rgba(13,27,75,.28); } table.wrt.is-scrolled-x-end th.wrt-pin-edge-end, table.wrt.is-scrolled-x-end td.wrt-pin-edge-end { box-shadow: -10px 0 12px -10px rgba(13,27,75,.28); } /* พื้นหลังของคอลัมน์ที่ตรึงต้องทึบ ไม่งั้นจะเห็นข้อความข้างใต้วิ่งทะลุ */ table.wrt tbody tr:hover td.wrt-pin-start, table.wrt tbody tr:hover td.wrt-pin-end { background: var(--wrt-hover); } table.wrt tbody tr.is-selected td.wrt-pin-start, table.wrt tbody tr.is-selected td.wrt-pin-end { background: var(--wrt-selected); } /* ── ซ่อนคอลัมน์ที่ผู้ใช้ไม่ต้องการดู ── */ table.wrt .wrt-col-hidden { display: none !important; } /* ── ปุ่มจัดการในแถว — ปุ่มใส ไม่มีขอบ จนกว่าจะชี้ ── */ table.wrt td.wrt-card-actions > * { display: flex; align-items: center; gap: .25rem; flex-wrap: nowrap; } table.wrt .wrt-act { display: inline-flex; align-items: center; gap: .3rem; height: 30px; padding: 0 .55rem; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--wrt-ink-soft); font-size: .8rem; font-weight: 500; font-family: inherit; cursor: pointer; white-space: nowrap; transition: background .12s, color .12s; } table.wrt .wrt-act:hover { background: #eef2f8; color: var(--wrt-ink); } table.wrt .wrt-act--danger { color: #b91c1c; } table.wrt .wrt-act--danger:hover { background: #fdeced; color: #991b1b; } /* ── ความหนาแน่นของแถว 3 ระดับ (จำค่าไว้ให้แต่ละคน) ── */ .wrt-shell[data-density="compact"], table.wrt[data-density="compact"] { --wrt-row-h: 34px; --wrt-cell-py: .32rem; --wrt-font: .8rem; --wrt-head-font: .72rem; } .wrt-shell[data-density="normal"], table.wrt[data-density="normal"] { --wrt-row-h: 44px; --wrt-cell-py: .6rem; --wrt-font: .84rem; --wrt-head-font: .75rem; } .wrt-shell[data-density="comfy"], table.wrt[data-density="comfy"] { --wrt-row-h: 58px; --wrt-cell-py: .9rem; --wrt-font: .88rem; --wrt-head-font: .78rem; } /* ── สถานะว่าง / กำลังโหลด ── */ .wrt-empty { text-align: center; padding: 3.5rem 1rem; color: var(--wrt-ink-dim); font-size: .85rem; } .wrt-empty i { display: block; font-size: 2rem; margin-bottom: .6rem; opacity: .45; } .wrt-skeleton td > span { display: block; height: 11px; border-radius: 4px; background: linear-gradient(90deg, #eef2f7 25%, #f7fafc 50%, #eef2f7 75%); background-size: 200% 100%; animation: wrtShimmer 1.2s infinite; } @keyframes wrtShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ══════════════════════════════════════════════════════════════════════════ 5. แถบท้าย — จำนวนรายการ + แบ่งหน้า (อยู่กับที่เสมอ) ══════════════════════════════════════════════════════════════════════════ */ .wrt-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; padding: .6rem .1rem .85rem; font-size: .8rem; color: var(--wrt-ink-dim); } .wrt-foot-count strong { color: var(--wrt-ink); font-weight: 600; font-variant-numeric: tabular-nums; } .wrt-pager { display: flex; align-items: center; gap: .15rem; } .wrt-pager button { min-width: 36px; height: 36px; padding: 0 .5rem; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--wrt-ink-soft); font-size: .8rem; font-weight: 500; font-family: inherit; cursor: pointer; font-variant-numeric: tabular-nums; transition: background .12s; } .wrt-pager button:hover:not(:disabled):not(.is-current) { background: var(--wrt-hover); color: var(--wrt-ink); } .wrt-pager button.is-current { background: var(--wrt-navy); color: #fff; font-weight: 600; cursor: default; } .wrt-pager button:disabled { opacity: .3; cursor: not-allowed; } .wrt-pager .wrt-gap { padding: 0 .15rem; color: var(--wrt-ink-dim); } /* ══════════════════════════════════════════════════════════════════════════ 6. จอ ≤1180px — iPad แนวนอน / โน้ตบุ๊กจอเล็ก ══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 1180px) { .wrt-shell { --wrt-cell-px: .65rem; } .wrt-shell[data-density="normal"] { --wrt-font: .82rem; --wrt-head-font: .73rem; } .wrt-head h1 { font-size: 1.05rem; } } /* ══════════════════════════════════════════════════════════════════════════ 7. จอ ≤768px — iPad แนวตั้ง / มือถือ → สลับเป็นการ์ดอัตโนมัติ ต้องมี data-label บน

ซึ่ง js/warroom-table.js เติมให้จากหัวตาราง ══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { body.wrt-app { overflow: auto; } /* จอเล็กให้เลื่อนทั้งหน้าตามปกติ ใช้นิ้วสะดวกกว่า */ body.wrt-app .wr-main-content { height: auto; overflow: visible; } .wrt-shell { height: auto; overflow: visible; padding-bottom: 1rem; } .wrt-body { overflow: visible; background: transparent; border: none; border-radius: 0; padding-bottom: .5rem; } /* แถบเครื่องมือเกาะบน — ยังค้นหา/กรองได้ตลอดขณะเลื่อนดูการ์ด */ .wrt-tools { position: sticky; top: var(--wrt-topbar-h); z-index: 20; background: var(--wrt-bg); border-bottom: 1px solid var(--wrt-line); margin: 0 -.5rem; padding: .5rem; } .wrt-tools input[type="search"] { max-width: none; } .wrt-tools-right { margin-left: 0; } table.wrt:not(.wrt-no-card), table.wrt:not(.wrt-no-card) tbody, table.wrt:not(.wrt-no-card) tr, table.wrt:not(.wrt-no-card) td { display: block; width: 100%; box-sizing: border-box; } table.wrt:not(.wrt-no-card) thead { display: none; } /* ชื่อคอลัมน์ย้ายไปอยู่ในแต่ละแถวแล้ว */ table.wrt:not(.wrt-no-card) tbody tr { position: relative; background: var(--wrt-bg) !important; border: 1px solid var(--wrt-line-str); border-radius: 10px; margin-bottom: .65rem; overflow: hidden; } /* เซลล์ในการ์ด — ใช้ padding + ป้ายลอย (absolute) แทน grid เหตุผล: grid จะทำให้ "ลูกทุกตัว" ของ

กลายเป็นช่องแยกกัน เซลล์ที่มี หลายชิ้น เช่น "ภ.จว.ขอนแก่นสภ.เมืองขอนแก่น" จะถูกแยก ไปคนละช่องจนอ่านสลับกัน — วิธีนี้เนื้อหาไหลต่อกันตามปกติ */ table.wrt:not(.wrt-no-card) tbody td { position: relative; height: auto; min-height: 38px; padding: .5rem .9rem .5rem 40%; border-bottom: 1px solid var(--wrt-line); text-align: left !important; white-space: normal !important; } table.wrt:not(.wrt-no-card) tbody tr td:last-child { border-bottom: none; } table.wrt:not(.wrt-no-card) tbody td::before { content: attr(data-label); position: absolute; left: .9rem; top: .5rem; width: 34%; font-size: .75rem; font-weight: 500; color: var(--wrt-ink-dim); line-height: 1.5; } table.wrt:not(.wrt-no-card) tbody td[data-label=""] { padding-left: .9rem; } table.wrt:not(.wrt-no-card) tbody td[data-label=""]::before { content: none; } /* แถวแรกของการ์ด = หัวการ์ด (ชื่อคน/รายการ) เน้นให้สแกนเร็ว */ table.wrt:not(.wrt-no-card) tbody td.wrt-card-title { padding: .7rem .9rem; font-size: .9375rem; font-weight: 600; color: var(--wrt-navy); border-bottom: 1px solid var(--wrt-line-str); } table.wrt:not(.wrt-no-card) tbody td.wrt-card-title::before { content: none; } /* ช่องติ๊กเลือก — ย้ายไปมุมขวาบน ไม่กินพื้นที่เป็นแถวของตัวเอง */ table.wrt:not(.wrt-no-card) tbody td.wrt-card-check { position: absolute; top: .6rem; right: .7rem; width: auto; min-height: 0; padding: 0; border: none; z-index: 1; } table.wrt:not(.wrt-no-card) tbody td.wrt-card-check::before { content: none; } table.wrt:not(.wrt-no-card) tbody td.wrt-card-check input { width: 20px; height: 20px; } /* ปุ่มจัดการในการ์ด — เต็มความกว้าง สูงพอกดด้วยนิ้ว */ table.wrt:not(.wrt-no-card) tbody td.wrt-card-actions { padding: .55rem .9rem; } table.wrt:not(.wrt-no-card) tbody td.wrt-card-actions::before { content: none; } table.wrt:not(.wrt-no-card) tbody td.wrt-card-actions > * { flex-wrap: wrap; gap: .4rem; } table.wrt:not(.wrt-no-card) tbody td.wrt-card-actions button, table.wrt:not(.wrt-no-card) tbody td.wrt-card-actions .wrt-act, table.wrt:not(.wrt-no-card) tbody td.wrt-card-actions .action { min-height: 40px; flex: 1 1 auto; justify-content: center; border: 1px solid var(--wrt-line-str); } table.wrt:not(.wrt-no-card) .wrt-col-hidden { display: none !important; } /* จอเล็กเป็นการ์ดแล้ว — ยกเลิกการตรึงคอลัมน์ทั้งหมด */ table.wrt:not(.wrt-no-card) th.wrt-pin-start, table.wrt:not(.wrt-no-card) td.wrt-pin-start, table.wrt:not(.wrt-no-card) th.wrt-pin-end, table.wrt:not(.wrt-no-card) td.wrt-pin-end { position: static; box-shadow: none; } .wrt-foot { position: sticky; bottom: 0; background: var(--wrt-bg); border-top: 1px solid var(--wrt-line-str); margin: 0 -.5rem; padding: .5rem .75rem; justify-content: center; } .wrt-pager button { min-width: 40px; height: 40px; } } /* จอเล็กมาก (มือถือแนวตั้ง) — ป้ายกับค่าเรียงบนลงล่าง */ @media (max-width: 430px) { table.wrt:not(.wrt-no-card) tbody td { padding-left: .9rem; padding-top: 1.55rem; } table.wrt:not(.wrt-no-card) tbody td::before { top: .4rem; left: .9rem; width: auto; } table.wrt:not(.wrt-no-card) tbody td.wrt-card-title, table.wrt:not(.wrt-no-card) tbody td[data-label=""] { padding-top: .7rem; } .wrt-head h1 { font-size: 1.05rem; } } /* ══════════════════════════════════════════════════════════════════════════ 8. Scrollbar ของพื้นที่ตาราง — บาง ไม่บังข้อมูล ══════════════════════════════════════════════════════════════════════════ */ .wrt-body::-webkit-scrollbar { width: 10px; height: 10px; } .wrt-body::-webkit-scrollbar-track { background: transparent; } .wrt-body::-webkit-scrollbar-thumb { background: #d5dbe5; border-radius: 5px; border: 3px solid #fff; } .wrt-body::-webkit-scrollbar-thumb:hover { background: #b8c1cf; } .wrt-body { scrollbar-width: thin; scrollbar-color: #d5dbe5 transparent; } /* ══════════════════════════════════════════════════════════════════════════ 9. พิมพ์ — คลายกรอบทั้งหมด ให้ตารางไหลต่อเนื่องทุกหน้ากระดาษ ══════════════════════════════════════════════════════════════════════════ */ @media print { body.wrt-app { overflow: visible; } body.wrt-app .wr-main-content { height: auto; overflow: visible; } .wrt-shell { height: auto; overflow: visible; display: block; } .wrt-body { overflow: visible; border: none; } .wrt-tools, .wrt-foot, .wrt-menu { display: none !important; } table.wrt thead th { position: static; } table.wrt thead { display: table-header-group; } /* พิมพ์หัวตารางซ้ำทุกหน้า */ table.wrt tbody tr { break-inside: avoid; } } @media (prefers-reduced-motion: reduce) { .wrt-skeleton td > span { animation: none; } table.wrt tbody tr { transition: none; } } /* ══════════════════════════════════════════════════════════════════════════ 10. โหมด "เลื่อนทั้งหน้า" — สำหรับหน้า Dashboard ที่ตารางเป็นแค่ส่วนหนึ่ง ไม่ได้อยู่ใน .wrt-shell จึงต้องให้หัวตารางเกาะ "ใต้แถบบนสุด" แทนขอบจอ ══════════════════════════════════════════════════════════════════════════ */ /* หมายเหตุ: ตำแหน่งเกาะของหัวตารางถูกคำนวณโดย js/warroom-table.js (ตรวจว่าตารางอยู่ในกล่องเลื่อนหรือเลื่อนทั้งหน้า) คลาสนี้จึงเหลือไว้เพื่อ ความเข้ากันได้ของ HTML เดิมเท่านั้น ไม่ได้ตั้งค่าอะไร */ /* กล่องเลื่อนแบบเบา — ใช้กับ wrapper เดิมของหน้าที่ไม่อยากรื้อเลย์เอาต์ จำกัดความสูงไว้เพื่อให้ "ตารางเลื่อนในกรอบ" ได้โดยไม่ต้องแปลงหน้าเป็น .wrt-shell ปรับต่อหน้าได้ด้วย style="--wrt-surface-max: 60vh" */ .wrt-surface { background: var(--wrt-bg); border: 1px solid var(--wrt-line-str); border-radius: 10px; overflow: auto; max-height: var(--wrt-surface-max, calc(100dvh - 15rem)); } @supports not (height: 100dvh) { .wrt-surface { max-height: var(--wrt-surface-max, calc(100vh - 15rem)); } } @media (max-width: 768px) { /* จอเล็กเป็นการ์ดและเลื่อนทั้งหน้าอยู่แล้ว — ไม่ต้องจำกัดความสูงซ้อนอีกชั้น */ .wrt-surface { max-height: none; border: none; background: transparent; overflow: visible; } } /* ══════════════════════════════════════════════════════════════════════════ 11. ตารางสรุปที่ "หัวหลายชั้น" (มี colspan/rowspan) — ปิดมุมมองการ์ด ตารางแบบนี้ความหมายอยู่ที่ตำแหน่งแถว×คอลัมน์ พอแตกเป็นการ์ดจะอ่านไม่ได้ จึงคงรูปตารางไว้ แล้วให้เลื่อนซ้าย-ขวาแทน (ใส่ทั้ง data-wrt {"card":false}) ══════════════════════════════════════════════════════════════════════════ */ table.wrt.wrt-no-card { min-width: max-content; } @media (max-width: 768px) { table.wrt.wrt-no-card thead th { top: 0; } /* อยู่ในกล่องเลื่อน ไม่ใช่ทั้งหน้า */ table.wrt.wrt-no-card td, table.wrt.wrt-no-card th { white-space: nowrap; } } /* หัวตารางหลายชั้น — ค่า top ของแถวที่ 2, 3 คำนวณให้โดย js/warroom-table.js (ถ้าปล่อยให้ทุกแถวเป็น top:0 หัวตารางจะซ้อนทับกันจนอ่านไม่ออก) */ /* ══════════════════════════════════════════════════════════════════════════ 12. กลืนสไตล์ตารางเดิมของแต่ละหน้า -------------------------------------------------------------------------- แต่ละหน้าเขียน CSS ตารางของตัวเองไว้ก่อนหน้านี้ (ลายสลับสี เส้นขอบทุกช่อง ขนาดตัวอักษรคนละค่า พื้นหัวตารางสีเทา ฯลฯ) บางกฎใช้ !important ด้วย ส่วนนี้จึงล้างให้เหลือรูปแบบเดียวทั้งระบบ — มีผลเฉพาะตารางที่ติด .wrt ตารางอื่นในหน้าเดียวกันไม่ถูกแตะ ══════════════════════════════════════════════════════════════════════════ */ /* ลายสลับสี / พื้นแถว — ธีม minimal ใช้เส้นคั่นแทน */ table.wrt tbody tr, table.wrt tbody tr:nth-child(even), table.wrt tbody tr:nth-child(odd), table.wrt.table-striped > tbody > tr:nth-of-type(odd) > *, table.wrt.table-striped > tbody > tr:nth-of-type(even) > * { background: transparent; } table.wrt tbody tr:hover { background: var(--wrt-hover) !important; } table.wrt tbody tr.is-selected { background: var(--wrt-selected) !important; } /* หัวตาราง ⚠️ ห้ามใช้ !important กับ background/color ตรงนี้ ตารางสรุปบางตัว (เช่น สรุปข้อมูล ผู้ค้า|ผู้เสพ ใน warroom.html) กำหนดสีหัวตาราง เป็นลำดับชั้นด้วย inline style — น้ำเงินเข้มทึบ #0d1b4b ไล่ไปอ่อนตามกลุ่มคอลัมน์ ซึ่ง "สื่อความหมาย" ว่าคอลัมน์ไหนอยู่กลุ่มเดียวกัน ถ้าใส่ !important จะทับพื้นเป็นขาวแต่ตัวอักษรยังเป็น #fff ตามเดิม → หัวตารางหายทั้งแถบ เมื่อไม่ใส่ !important: inline style ชนะ (คงสีเดิมไว้) ส่วนตารางที่ไม่ได้กำหนดสีเอง จะได้สไตล์ minimal ของเรา เพราะ specificity (0,1,2) สูงกว่า CSS เดิมของหน้า */ table.wrt:not(.wrt-keep-head) thead { border: none !important; } table.wrt:not(.wrt-keep-head) thead th { background: var(--wrt-head-bg); color: var(--wrt-head-fg); font-size: var(--wrt-head-font) !important; font-weight: 600 !important; border-left: none; border-right: none; border-top: none; } /* ตารางที่คงสีหัวเดิม — แตะเฉพาะโครงสร้าง (เกาะบน/ระยะ) ไม่แตะสีและขนาดตัวอักษร */ table.wrt.wrt-keep-head thead th { padding: .55rem .75rem; } /* เซลล์ — ระยะและขนาดตัวอักษรชุดเดียวทั้งระบบ */ table.wrt tbody td { padding: var(--wrt-cell-py) var(--wrt-cell-px) !important; font-size: var(--wrt-font) !important; line-height: 1.5; border-left: none !important; border-right: none !important; border-top: none !important; border-bottom: 1px solid var(--wrt-line) !important; } table.wrt tbody tr:last-child td { border-bottom: none !important; } /* ตารางสรุปที่ต้องมีเส้นตารางจริง (หัวหลายชั้น) — คงเส้นแนวตั้งไว้ให้อ่านคอลัมน์ออก */ table.wrt.wrt-no-card tbody td, table.wrt.wrt-no-card thead th { border-left: 1px solid var(--wrt-line) !important; } table.wrt.wrt-no-card tbody td:first-child, table.wrt.wrt-no-card thead th:first-child { border-left: none !important; } /* คลาส Bootstrap ที่ยังติดมากับตาราง */ table.wrt.table { --bs-table-bg: transparent; margin-bottom: 0; } table.wrt.table-bordered > :not(caption) > * > * { border-width: 0; } /* ปุ่มจัดการเดิมของหน้า (.action, .btn-sm) — ปรับให้สูงเท่ากันและกดถนัด */ table.wrt tbody td .action, table.wrt tbody td .btn-sm { vertical-align: middle; } /* ── ข้อความบรรทัดรองในเซลล์ ──────────────────────────────────────────── หลายหน้าใช้คลาสอเนกประสงค์ (.muted / .text-muted / .small) ปนกันระหว่าง "ข้อความสถานะว่างกลางจอ" กับ "บรรทัดรองในแถว" — ตัวอย่างจริง: หน้าจัดการผู้ใช้ ตั้ง .muted { padding: 1.5rem; text-align: center } ไว้สำหรับข้อความว่าง แต่แถวข้อมูลก็ใช้คลาสเดียวกันกับชื่อ สภ. ทำให้ทุกแถวสูงเกินมา ~48px ในบริบทของเซลล์ตารางจึงบังคับให้เป็น "บรรทัดรอง" เสมอ */ table.wrt tbody td .muted, table.wrt tbody td .text-muted, table.wrt tbody td small { display: block; padding: 0 !important; margin: 0 !important; text-align: inherit !important; font-size: .75rem !important; line-height: 1.45; color: var(--wrt-ink-dim) !important; } /* บรรทัดหลักในเซลล์ที่มีสองบรรทัด */ table.wrt tbody td > div:first-child > strong, table.wrt tbody td > strong:first-child { font-weight: 600; } table.wrt tbody td > div + div { margin-top: .05rem; } /* กลุ่มปุ่มจัดการเดิม (.action-group) — เรียงแนวนอน ไม่ดันแถวให้สูง */ table.wrt tbody td .action-group { display: flex; align-items: center; gap: .3rem; flex-wrap: nowrap; } table.wrt tbody td .action { padding: .3rem .55rem !important; font-size: .75rem !important; } @media (max-width: 768px) { table.wrt:not(.wrt-no-card) tbody td .action-group { flex-wrap: wrap; } table.wrt:not(.wrt-no-card) tbody td .action { flex: 1 1 auto; justify-content: center; min-height: 40px; } } /* ══════════════════════════════════════════════════════════════════════════ 13. คืนค่าระยะของ "โหมดการ์ด" หลังจากส่วนกลืนสไตล์เดิม -------------------------------------------------------------------------- ส่วนที่ 12 ใช้ !important เพื่อชนะ CSS เดิมของแต่ละหน้า แต่ก็ไปทับระยะของ โหมดการ์ดด้วย ทำให้ป้ายกำกับ (absolute) ซ้อนทับค่าบน iPad แนวตั้ง จึงต้องประกาศซ้ำท้ายไฟล์ให้ชนะกลับ ══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { table.wrt:not(.wrt-no-card) tbody td { padding: .5rem .9rem .5rem 40% !important; height: auto !important; min-height: 38px; } table.wrt:not(.wrt-no-card) tbody td[data-label=""], table.wrt:not(.wrt-no-card) tbody td.wrt-card-title, table.wrt:not(.wrt-no-card) tbody td.wrt-card-actions { padding: .65rem .9rem !important; } table.wrt:not(.wrt-no-card) tbody td.wrt-card-check { padding: 0 !important; border: none !important; } /* หัวการ์ด (ชื่อคน/รายการ) ต้องอยู่บนสุดเสมอ แม้ในตารางจะไม่ใช่คอลัมน์แรก ใช้ flex order แทนการย้าย DOM — หน้าเดิมยัง render แถวแบบเดิมได้ไม่ต้องแก้ */ table.wrt:not(.wrt-no-card) tbody tr { display: flex; flex-direction: column; } table.wrt:not(.wrt-no-card) tbody td.wrt-card-title { order: -2; } table.wrt:not(.wrt-no-card) tbody td.wrt-card-check { order: -3; } table.wrt:not(.wrt-no-card) tbody td.wrt-card-actions { order: 99; } } @media (max-width: 430px) { table.wrt:not(.wrt-no-card) tbody td { padding: 1.5rem .9rem .5rem !important; } table.wrt:not(.wrt-no-card) tbody td[data-label=""], table.wrt:not(.wrt-no-card) tbody td.wrt-card-title, table.wrt:not(.wrt-no-card) tbody td.wrt-card-actions { padding: .65rem .9rem !important; } } /* ปุ่มจัดการในการ์ด — เรียงแนวนอนแบ่งความกว้างเท่ากัน (หน้าเดิมบางหน้าตั้ง flex-direction: column ไว้ในสไตล์ของตัวเอง ทำให้ปุ่มซ้อนกันเปลืองพื้นที่) */ @media (max-width: 768px) { table.wrt:not(.wrt-no-card) tbody td.wrt-card-actions > * { flex-direction: row !important; flex-wrap: wrap !important; } table.wrt:not(.wrt-no-card) tbody td.wrt-card-actions .action { width: auto !important; flex: 1 1 40% !important; } } /* ══════════════════════════════════════════════════════════════════════════ 14. จอกลาง (≤1180px) — อย่าบีบคอลัมน์จนข้อความแตกเป็นเศษบรรทัด -------------------------------------------------------------------------- ปัญหาที่พบจริงบน iPad แนวนอน: ตาราง width:100% ถูกบีบให้พอดีจอ ชื่อคนอย่าง "นายประเสริฐ วงศ์สุวรรณ" จึงถูกตัดเป็น 4 บรรทัด แถวสูงขึ้นเท่าตัวและอ่านยาก min-width:max-content ทำให้คอลัมน์คงความกว้างตามเนื้อหา แล้วเลื่อนซ้าย-ขวาแทน (ยังปลอดภัยเพราะคอลัมน์ชื่อถูกตรึงซ้าย และปุ่มจัดการถูกตรึงขวาไว้แล้ว) ถ้าเนื้อหาแคบกว่าจอ width:100% ยังชนะอยู่ ตารางจึงไม่หดลงเล็กกว่าจอ ══════════════════════════════════════════════════════════════════════════ */ @media (min-width: 769px) and (max-width: 1180px) { table.wrt { min-width: max-content; } } /* ── คอลัมน์ปุ่มจัดการ — เรียงแนวนอนเสมอบนจอใหญ่ ──────────────────────── หน้าต่าง ๆ วางปุ่มไว้ไม่เหมือนกัน (บางหน้าห่อด้วย

, บางหน้าใส่ปุ่มตรง ๆ ใน

) ถ้าปล่อยให้ขึ้นบรรทัดใหม่ แถวจะสูงเป็นสองเท่าโดยไม่จำเป็น */ table.wrt tbody td.wrt-card-actions { white-space: nowrap; } table.wrt tbody td.wrt-card-actions > button, table.wrt tbody td.wrt-card-actions > a { display: inline-flex; vertical-align: middle; } table.wrt tbody td.wrt-card-actions > button + button, table.wrt tbody td.wrt-card-actions > a + a, table.wrt tbody td.wrt-card-actions > button + a, table.wrt tbody td.wrt-card-actions > a + button { margin-left: .25rem; } @media (max-width: 768px) { table.wrt:not(.wrt-no-card) tbody td.wrt-card-actions { white-space: normal; display: flex; flex-wrap: wrap; gap: .4rem; } table.wrt:not(.wrt-no-card) tbody td.wrt-card-actions > button, table.wrt:not(.wrt-no-card) tbody td.wrt-card-actions > a { flex: 1 1 40%; justify-content: center; min-height: 40px; margin-left: 0 !important; } } /* ══════════════════════════════════════════════════════════════════════════ 15. มุมโค้ง — ให้ตารางทุกหน้ามีมุมมนเหมือนกันทั้งระบบ -------------------------------------------------------------------------- ใช้วิธี "มนที่เซลล์มุม" แทนการใส่ overflow:hidden ที่ตัว เพราะ overflow:hidden จะสร้าง clipping context ที่ทำให้หัวตารางแบบเกาะบน (position:sticky) หยุดทำงานทันที ส่วนกล่องที่เลื่อนได้ (wrapper เดิมของแต่ละหน้า) ถูกใส่คลาส .wrt-scrollbox ให้โดย js/warroom-table.js ตอนที่มันไล่หาบรรพบุรุษที่เลื่อนได้อยู่แล้ว ══════════════════════════════════════════════════════════════════════════ */ .wrt-scrollbox { border-radius: var(--wrt-radius); } table.wrt { border-radius: var(--wrt-radius); } table.wrt thead tr:first-child th:first-child { border-top-left-radius: var(--wrt-radius); } table.wrt thead tr:first-child th:last-child { border-top-right-radius: var(--wrt-radius); } table.wrt tbody tr:last-child td:first-child { border-bottom-left-radius: var(--wrt-radius); } table.wrt tbody tr:last-child td:last-child { border-bottom-right-radius: var(--wrt-radius); } /* มีแถวสรุปท้ายตาราง (tfoot) ก็ให้มุมล่างไปอยู่ที่ tfoot แทน */ table.wrt tfoot tr:last-child td:first-child { border-bottom-left-radius: var(--wrt-radius); } table.wrt tfoot tr:last-child td:last-child { border-bottom-right-radius: var(--wrt-radius); } table.wrt:has(tfoot) tbody tr:last-child td { border-radius: 0; } /* การ์ด / กล่องเครื่องมือ ใช้รัศมีเดียวกันหมด */ .wrt-kpi, .wrt-tools input, .wrt-tools select, .wrt-menu-pop { border-radius: var(--wrt-radius); } .wrt-btn, .wrt-pager button { border-radius: calc(var(--wrt-radius) - 3px); } @media (max-width: 768px) { table.wrt:not(.wrt-no-card) tbody tr { border-radius: var(--wrt-radius); } } /* ══════════════════════════════════════════════════════════════════════════ 16. กรอบเลื่อนสำหรับตารางหัวหลายชั้น -------------------------------------------------------------------------- ปัญหาที่เจอจริงในหน้า "สรุปข้อมูล ผู้ค้า | ผู้เสพ": หน้านั้นตั้ง #colc-view .table-responsive { overflow-x: visible !important } ไว้เพื่อให้ใช้สกรอลบาร์ของหน้าแทน กล่องครอบจึงไม่ใช่ "กรอบเลื่อน" หัวตารางที่สูงถึง 3 ชั้น (~190px) เลยไปเกาะกับ "หน้าจอ" แล้วลอยทับแถวข้อมูล จนอ่านแถวบน ๆ ไม่ได้ แก้ด้วยการจำกัดความสูงกล่อง → หัวตารางเกาะที่ขอบบนของกล่องแทน แถวแรกจึงอยู่ใต้หัวตารางพอดีเสมอ และคอลัมน์ที่ตรึงไว้ก็ทำงานถูกต้องด้วย คลาสนี้ถูกใส่ให้อัตโนมัติโดย js/warroom-table.js (ดู ensureBox) ปรับความสูงต่อหน้าได้ด้วย style="--wrt-box-max: 65vh" ══════════════════════════════════════════════════════════════════════════ */ .wrt-boxed { overflow: auto !important; max-height: var(--wrt-box-max, calc(100dvh - 14rem)) !important; border-radius: var(--wrt-radius); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } @supports not (height: 100dvh) { .wrt-boxed { max-height: var(--wrt-box-max, calc(100vh - 14rem)) !important; } } @media (max-width: 768px) { .wrt-boxed { max-height: var(--wrt-box-max, calc(100dvh - 10rem)) !important; } } .wrt-boxed::-webkit-scrollbar { width: 10px; height: 10px; } .wrt-boxed::-webkit-scrollbar-track { background: transparent; } .wrt-boxed::-webkit-scrollbar-thumb { background: #d5dbe5; border-radius: 5px; border: 3px solid #fff; } .wrt-boxed::-webkit-scrollbar-thumb:hover { background: #b8c1cf; } .wrt-boxed { scrollbar-width: thin; scrollbar-color: #d5dbe5 transparent; } @media print { .wrt-boxed { max-height: none !important; overflow: visible !important; } } /* ══════════════════════════════════════════════════════════════════════════ ธีมมืด (Luxury) — ไฟล์นี้เดิมมีแต่จานสีสว่าง ตารางเลยเป็นแผ่นขาวกลางหน้าจอมืด แก้ที่ตัวแปรจุดเดียว มีผลกับทุกหน้าที่ใช้ table.wrt (report-print, psych_detail, table-preview ฯลฯ) ══════════════════════════════════════════════════════════════════════════ */ body.wr-dark { --wrt-bg: #111a2e; --wrt-head-bg: #16223c; --wrt-head-fg: #a5b4cd; --wrt-line: #1f2d4a; --wrt-line-str: #25385c; --wrt-hover: rgba(245, 200, 66, .06); --wrt-selected: rgba(96, 165, 250, .10); --wrt-accent: #f5c842; --wrt-ink: #e6edf7; --wrt-ink-soft: #a5b4cd; --wrt-ink-dim: #8b9dbc; --wrt-navy: #0a1428; }