table样式问题总结
table相关属性
- border-collapse：设置相邻单元格的边框处理样式 collapse/separate--是否折叠
- border-spacing：设置响铃单元格边框的间距，当border-collapse值设为collapse的时候border-spacing失效 3.table-layout：指定表格的布局样式 auto/fixed
注意：
table-layout：浏览器显示表格采用的方法时由table-layout决定的，默认值auto 当为auto的时候浏览器会根据每列中最宽的单元格设置整列单元格的宽度，在确定table布局之前，浏览器必须获取所有的表格内容
当值为fixed时，表格的大小是由表格自身和单独每列的width值设定的。如果没有列宽值可用，浏览器会设置等距离的列宽。因此，只要获取了一行的表格数据浏览器就可以决定列宽。其他行内的数据会自动换行以适应列宽。（结果就是可能导致行高比auto模式下略高）
以提问方式总结下吧
1.table的默认样式
display: table;
border-collapse:separate
border-spacing: 2px;
table-layout:auto
td的box-sizing属性默认是content-box,设置padding后width会被撑大，也可以设置成border-box，设置padding后width还是固定，内容区被缩小
2.table的table-layout属性你知道吗？
-
- auto:默认。列宽度由单元格内容设定。
-
- fixed: 列宽由表格宽度和列宽度设定。
- 如果table有宽度会平分单元格，实际组件中一般table都会设置width:100%，单元格如果内容超出了，可能会跑到屏幕外
- 如果table没有宽度则由列宽度决定table宽度,单元格由内容撑开
思考：有时候会发现给表格设置单元格宽度并不生效？
3.thead固定，tbody设置垂直滚动条怎么设置？
方案一：借鉴 juejin.cn/post/684490…
思路：
要想给tbody一个超出的滚动条，其实只需要给tbody设置一个固定height，以及overflow:auto也就是超出添加滚动条。但是table固有的display属性使得为thead和tbody设置height没有用。
- 把tbody设置成display:block，然后就对其高度设置一个固定值，overflow设置成auto。
.tbody {
height: 240px;
display: block;
overflow-y: auto;
}
2改变thead, tbody tr的dispaly属性
thead,
tbody tr {
display: table;
width: 100%;
table-layout: fixed;
}
display:table使得tr标签表现为一个table,table-layout:fixed和设置宽度的width:100%是一套组合拳，使得这个"table"的第一行宽度为100%，并且每一列宽度是一致的，后面所有行按照第一行对齐，如果内容超出就出现滚动条。
- 这之后每一列的列宽是一致的，如果需要设置列宽
th:nth-child(1),
td:nth-child(1) {
width: 5%;
}
th:nth-child(2),
td:nth-child(2) {
width: 6.7%;
}
完整示例：
但实际需求中一般表格的单元格需要由内容撑开，最大限度的显示内容，如果按上面的方式，平分单元格，会出现单元格中内容过多超出单元格外面。
方案二：借鉴www.programminghunter.com/article/567…
思路：设置2个表格，给表头的表格设置高度，设置层级；表体的表格影藏头部，margin-top负表头的高度。表体的表格的外层div设置高度，overflow-y:scroll
4.表格同时设置横向滚动条和垂直滚动条怎么设置？见上述2个代码片段
思路：
1 设置外层容器宽度，里面的table超出宽度产生横向滚动条
2 table的宽度要由内容撑开，这个值一般是动态设置的
3 若要产生垂直滚动条，则需要tbody是块级元素，有高度，实际内容超出高度产生滚动条；因为默认display: table-row-group设置高度是无效的 设置高度是无效的
具体实现的例子
需求：实现一个width 300px ,tbody 49*5 = 245px的盒子 超出产生横向和纵向滚动条
