https://benzhub.github.io/tags/%E8%A1%A8%E6%A0%BC/Recent content in 表格 on BenzHubHugozh-TWSat, 22 Aug 2026 00:00:00 +0000https://benzhub.github.io/post/tailwindcss/022-tables-lists/Sat, 22 Aug 2026 00:00:00 +0000https://benzhub.github.io/post/tailwindcss/022-tables-lists/<blockquote> <p>上一篇讓元素「動起來、變好看」，這一篇要把視線轉向<strong>內容本身的結構化呈現</strong>。<strong>TailwindCSS</strong> 的表格與清單工具，涵蓋 <code>border-collapse</code>／<code>border-separate</code>（邊框合併或分離）、<code>border-spacing</code>（儲存格間距）、<code>table-layout</code>（<code>table-auto</code>／<code>table-fixed</code> 決定欄寬策略）、<code>caption-side</code>（表格說明位置），以及清單的 <code>list-style-type</code>（項目符號樣式）、<code>list-inside</code>／<code>list-outside</code>（符號位置）、<code>list-image</code>（自訂圖片符號）。搭配 <code>overflow-x-auto</code>、<code>divide-y</code>、<code>truncate</code> 這些老朋友，你就能打造出既專業又響應式的資料表與美化清單——<strong>讓內容從「能看」升級到「好讀」</strong>。</p> </blockquote>