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