tbody 滾動條設置

文章介紹瞭如何將滾動條設置在tbody標籤上，而且表格總體和未設置滾動條一致；此外補充了一些table的冷門姿式。

How to set tbody height with overflow scroll

問題demo

解決問題demo

要想給tbody一個超出的滾動條，其實只須要給tbody設置一個固定height，以及overflow:auto也就是超出添加滾動條。可是table固有的display屬性使得爲thead和tbody設置height沒有用。

這裏首先作的就是改變display屬性：

table,thead,tbody{
    display:block
}
複製代碼

以後能夠設置height，可是在設置height後，這時候表格的樣式扭曲了，表現爲問題demo表二，爲了保持樣式正常，須要：

thead, tbody tr {
    display:table;
    width:100%;
    table-layout:fixed;
}
複製代碼

display:table使得tr標籤表現爲一個table,table-layout:fixed和設置寬度的width:100%是一套組合拳，使得這個"table"的第一行寬度爲100%，而且每一列寬度是一致的，後面全部行按照第一行對齊，若是內容超出就出現滾動條。

若是想使得thead和tbody寬度保持一致，須要額外去除thead多餘的滾動條的寬度，好比：

thead {
    width: calc( 100% - 1em )
}
複製代碼

這以後每一列的列寬是一致的。存在的問題是若是提早使用標籤colgroup設置不一樣列寬，這裏是丟失的。

不是很好的解決方法是從新再去爲th、td設置寬度，好比：

th:nth-child(1),
td:nth-child(1) {
  width: 5%;
}
th:nth-child(2),
td:nth-child(2) {
  width: 6.7%;
}
複製代碼

順便補充一下關於table的冷門姿式

何時去用table呢？

歪果話是這麼說的：tables are for tabular data. 啥意思呢？好比乘法口訣表...

不要用table去佈局！由於html標籤是語義化的，多餘語義化的標籤對screen readers不友好。

thead、tbody、tfoot

只有一個表頭推薦使用這個三個元素去包裹行（tr元素），語義化指定。

這裏tfoot元素是特殊的，推薦在html中tfoot是放在thead以後，tbody以前。（可是渲染結果仍是在最後的）理由：

this is an accessibility concern, as the footer may contain information necessary to understand the table, it should be before the data in the source order.

demo

td、th

cells

其中th不限制只在thead中使用，它只是簡單表示標題信息

雙軸狀況就跳過不使用thead了，雙軸

cells合併

rowspan是多行合併，colspan是多列合併

比較常見的是組織table headers：demo

基本樣式

使用colors、lines去區分表格的各個部分。

默認狀況下，table cells之間間隔2px（經過用戶代理樣式表）：

table {
    border-collapse: separate;
    border-spacing: 2px;
}
複製代碼

能夠去設置這個值的大小：

table {
  border-spacing: 0.5rem;
}
複製代碼

更常見的是移除這個值：

table {
  border-collapse: collapse;
}
複製代碼

demo

table的寬度

table元素有點兒像display:block，由於一個table元素會在新一行去顯示。可是它的寬度...須要多寬就是多寬，也不能去設置。

cell不換行，text默認換行：demo

參考連接

how-to-set-tbody-height-with-overflow-scroll

A Complete Guide to the Table Element