今日目標
處理醫療報告中最常見的冗長檢驗項目表格；運用 CSS Paged Media 確保跨頁時表頭自動重複顯示，避免閱讀斷層，並透過 Thymeleaf 動態渲染將異常數值標註為醒目的紅色。

核心概念：跨頁表頭與臨床辨識度
1.跨頁表頭重複顯示（Table Header Grouping）：
健檢項目的檢驗結果往往多達數十筆甚至數百筆，必然會跨越紙張。若換頁後最上方沒有「項目、結果、單位、參考區間」等標題，閱讀者（醫師或病患）極易產生視覺疲勞甚至看錯欄位。我們必須確保瀏覽器在列印/轉檔換頁時自動補上表頭。

2.臨床異常數值警示（Dynamic Red Highlighting）：
當檢驗數值超出正常生理區間時，必須能在成千上萬的數字中「一眼被看見」。透過後端判定邏輯結合前端條件樣式，能大幅提升醫療人員的審閱效率。
實作重點：CSS 表格跨頁優化與 Thymeleaf 動態綁定

實作重點解析
1.Thymeleaf 迴圈渲染 (th:each)：
在 HTML 的 標籤中，透過 Thymeleaf 的 th:each 屬性讀取後端傳入的檢驗項目清單（labItems），將陣列資料動態展開為表格的每一列：

<tr th:each="item : ${labItems}">
    <td th:text="${item.name}">項目名稱</td>
    <!-- 動態綁定數值與條件樣式 -->
    <td th:text="${item.result}" 
        th:class="${item.isAbnormal} ? 'text-danger' : ''">數值</td>
    <td th:text="${item.unit}">單位</td>
    <td th:text="${item.referenceRange}">參考區間</td>
</tr>

2.跨頁表頭的 CSS 魔法屬性：
利用 W3C 規範中的 display: table-header-group，賦予表格的 特殊行為。當 Gotenberg（Chromium 引擎）將網頁轉為多頁 PDF 時，會自動將這個群組複製並置頂在每一頁的最上方：

thead {
display: table-header-group;
}
tr {
break-inside: avoid; /* 避免單行資料被從中間腰斬 */
}

3.動態樣式切換 (th:class)：
透過三元運算子 th:class="${item.isAbnormal} ? 'text-danger' : ''"。當該筆檢驗項目的 isAbnormal 為 true 時，網頁元素會動態掛載我們定義好的 .text-danger（紅色粗體）樣式，讓異常紅字精準呈現。

心得
display: table-header-group 簡直是報表排版的魔法屬性，瞬間解決了跨頁痛點。