tbody 滾動條設定

TTtuntuntutu發表於2019-03-01

文章介紹瞭如何將滾動條設定在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

相關文章