返回元件總覽

ENGINEERING UI CATALOG

表格

使用原生 table 結構，透過 UITable 統一處理框線、間距、色彩與橫向捲動。

UITable

完整框線表格

預設包含橫向與垂直欄位框線。包裝器內可直接使用 table、thead、tbody、tfoot 等原生標籤；窄螢幕會提供橫向捲動。

近期預約紀錄
預約編號顧客服務方案預約時間狀態金額
BK-20260806-01王小明經典個人諮詢2026/08/08 10:00已確認NT$ 1,500
BK-20260806-02陳怡君VIP 尊榮體驗2026/08/08 14:00待確認NT$ 4,500
BK-20260806-03林美玲經典個人諮詢2026/08/09 11:30已完成NT$ 1,500
合計NT$ 7,500
查看使用方式
<UITable :hide-vertical-borders="false">
  <table>
    <thead>
      <tr>
        <th>顧客</th>
        <th>服務方案</th>
        <th>狀態</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>王小明</td>
        <td>經典個人諮詢</td>
        <td>已確認</td>
      </tr>
    </tbody>
  </table>
</UITable>
UITable

隱藏垂直框線

設定 hide-vertical-borders 後，只保留橫向分隔線，適合內容較多、希望畫面更輕盈的表格。

顧客服務方案預約時間狀態
王小明經典個人諮詢2026/08/08 10:00已確認
陳怡君VIP 尊榮體驗2026/08/08 14:00待確認
林美玲經典個人諮詢2026/08/09 11:30已完成
查看使用方式
<UITable hide-vertical-borders><table>...</table></UITable>