HTML & CSS – Styling Table
前言
Table (表格) 历史悠久, 它有许多独特的默认样式, 它也是最早的布局方案方案哦 (现在依然有用 table 来做布局的, 比如 email template).
这篇来介绍一下基本的 table styling.
参考
Youtube – Styling HTML tables with CSS - Web Design/UX Tutorial
Youtube – HTML Tables Tutorial with CSS Styling - Crash Course
Youtube – How To Create Responsive Table In HTML & CSS || How To Make Responsive Table Using HTML & CSS (RWD Table)
Table HTML 结构
<table> <caption> Table Title </caption> <thead> <tr> <th>First Name</th> </tr> </thead> <tbody> <tr> <td>Heng Keat</td> </tr> </tbody> <tfoot> <tr> <td>Footer value</td> </tr> </tfoot> </table>
table 就不用说了
caption 是 table 的 title, 很少会用到, 除非在乎 semantic HTML
thead, tbody, tfoot 是 table 内容的结构, 类似于 header, main, footer, 不要小看它哦, 在 printing 的时候 thead, tfoot 会在每一页都出现哦 (很重要的功能)
tr 是 table row
th 是 table header, 用来放 column label (注: 上面 thead 是 table head)
td 是 table data, 也叫 table cell, 用来放 data
上面这个是最常见的结构, 但不是唯一, 还有像下面这样的
这种双 label 也是 ok 的, 效果:
Default Style
<table> <thead> <tr> <th>First Name</th> <th>Last Name</td> <th>Full Name</th> <th>Age</th> </tr> </thead> <tbody> <tr> <td>Derrick</td> <td>Yam</td> <td>Derrick Yam</td> <td>40</td> </tr> <tr> <td>Kelly</td> <td>Wong</td> <td>Kelly Wong</td> <td>18</td> </tr> <tr> <td>Heng Keat</td> <td>Yam</td> <td>Yam Heng Keat</td> <td>25</td> </tr> </tbody> <tfoot> <tr> <td></td> <td></td> <td>Total:</td> <td>83</td> </tr> </tfoot> </table>
效果
特点:
1. header 有 bold, text-align: center
2. 每个 column (红框) 的 width 是 max-content
3. 间距, 如果我们为 thead 和 tbody 添加背景色就可以看见 default 的间距
中间白色的线就是间距, 它可不是 border 哦
加上 border
table { border: 1px solid black; tr, th, td { border: 1px solid black; } }
注: thead, tbody, tfoot 是没有 border 的
加了 border 也可以看出 default 的间距
常用美化手法
默认太丑了, 通常会做一些小调整
1. border-collapse
table { border-collapse: collapse; }
它的效果就是把 default 的间距吃掉, 同时类似 margin collapse, 会把 2 个 border 合并成 1 个
注意: 这个手法不支持 sticky
如果我们加入 sticky, 它的 border 会消失
HTML 加一个 wrapper 做 scroll container
<div class="table-wrapper"> <table> ...same as before </table> </div>
CSS
.table-wrapper { overflow-x: auto; width: 400px; table { border-collapse: collapse; border: 1px solid black; tr, th, td { border: 1px solid black; } th, td { padding: 1rem; white-space: nowrap; } :is(th, td):nth-child(1) { position: sticky; left: 0; background-color: white; } } }
效果
相关 Issue 参考: Stack Overflow – Border style do not work with sticky position element
解决方法就是不要用 border-collapse, 改用 border-spacing 来去掉间距. 然后画 border 时候自己控制 nth-child 不要让 border 重叠.
table { border-spacing: 0; th, td { border: 1px solid black; } :is(th, td):nth-child(n + 2) { border-left: unset; } td { border-top: unset; } }
把重叠的部分 unset 掉就可以了
2. padding
空间是最重要的了
table { th, td { padding: 0.5rem 1rem; } }
效果
到这里就算及格了, 剩余的就是美化而已.
3. caption
默认就是 text-align: center 了. 通过 margin-bottom 做个间距就很棒了.
4. table width, layout, horizontal scroll
table width 默认是 hug content 的, 当 container 小的时候 table 会尝试 word wrap 和 shrink td 直到无法 wrap 后它会整个缩小.
table 不具备 scrollable, 如果想要 scroll 就需要加一个 div container 然后 overflow: auto, 这样 table word wrap 和 shrink td 后就不会缩小了，如果不希望它 shrink td 那 td 要用 min-width, 或者 hug content。
table-layout: auto 是让它自动计算 col 的 width, fixed 则是每一个 col 都一致
table 只有在非 hug content 情况下才有效哦.
图 1 是 auto, age 的内容比较长, 所以当 table 有多余 width 的时候它被分配的也比较多, 图 2 是 fixed, 两个 col 的 width 始终一致.
参考: W3Schools – CSS table-layout Property
当 container width 不够时, fixed 会变成下面这样, 所以通常只有在空间足够的情况下才会考虑 fixed.
4. 其它
CSS Style
注意它的 border-radius 是怎么弄的.
table { border-radius: 10px 10px 0 0; // 要把 caption 拿掉才行哦, 不然 caption 在 top 看不到 radius 了 overflow: hidden; border-collapse: collapse; tfoot { border-bottom: 4px solid crimson; // 必须给在 tfoot 因为有 collapse, table border-bottom 和 tfoot 会合并 } th, td { padding: 0.5rem 1rem; } th { text-align: left; font-size: 2rem; } td { font-size: 1.5rem; } tbody tr:nth-last-of-type(even) { background-color: hsl(0, 13%, 85%); } thead { background-color: crimson; color: white; } }
其它招数
align & valign attribute
上面的 Age column 是靠右边的, 但是 CSS 却没有声明, 这是因为它是用 HTML Attribute 声明的
当然你要用 CSS 也是可以, 那就是 text-align.
<tfoot> <tr> <td></td> <td></td> <td align="right">Total:</td> <td align="right">83</td> </tr> </tfoot>
valign 就是 vertical align, 目前例子中看不出来, 我们修改一下例子
把 Full Name column 所有的 th, td 设置成 width: 50px, 字 wrap 以后高度就增加了. 这时会发现 Age column 的值是居中的.
通过 attribute valign 或 CSS vertical-align: top 就可以让字体靠上了.
col-span & row-span
假设 total 很长, 这会导致 Age column 也很长, 但偏偏 tfoot 右边有许多可用空间, 这时就可以充分利用这些空间了.
<tfoot>
<tr>
<td></td>
<td align="right">Total:</td>
<td colspan="2" align="right">1234567891012345678910</td>
</tr>
</tfoot>
让 tr 内只有 3 个 td, 最后一个 td 使用 2 个格子, 效果
colspan: 2 意思是用 2 个 column
rowspan 就是用 2 个 row (反过来而已)
这个 span 的概念和 grid 是一样的, grid 就是抄袭 table 的. table 才是鼻祖.
有玩过 Excel 的 merge cells 也可以体会到它是同一个概念.
Responsive Table
来个简单的例子就好
RWD 效果
它的做法并没有很直观
1. 把 thead hide 起来.
2. 让 tr, td 变成 display block, 这时候会长这样
现在每 2 个 row 代表原先的 1 个 row,
3. 重新画 border 就比较明显了, 在 row 加上 margin-bottom
这样就看出来原本的 row 了
4. 通过 td::before 插入 label, 然后绝对定位
最终 CSS Style
@media (max-width: 500px) { .container { width: 100%; table { border: 0; width: 100%; thead { display: none; } tr, td { display: block; text-align: right; border: 1px solid black; } tr { margin-bottom: 1rem; } td { padding-left: 50%; position: relative; &::before { content: attr(data-label); position: absolute; left: 0; padding-left: 1rem; width: 50%; text-align: left; } } } } }
HTML
<table> <thead> <tr> <th>First Name</th> <th align="right">Age</th> </tr> </thead> <tbody> <tr> <td data-label="First Name">Derrick</td> <td data-label="Age" align="right">40</td> </tr> <tr> <td data-label="First Name">Kelly</td> <td data-label="Age" align="right">18</td> </tr> <tr> <td data-label="First Name">Heng Keat</td> <td data-label="Age" align="right">25</td> </tr> </tbody> </table>
注意看 data-label 是如何被使用到 content 的.
看了许多教程都是用同样的手法, 但这个手法很 limitation 的, 一旦 label 字数长就完蛋了. 它没有办法像真的 row 那样撑大 height.
比如这样:
目前还没有遇到, 以后在看看有没有问题呗.
