table表格边框的设置

表格边框线的基本设置涉及到border、cellspacing、cellpadding、bordercolor这几个属性。
border属性：控制表格的边框。
cellspacing属性：控制表格单元格之间的距离。
cellpadding属性：控制表格单元格的边距。
bordercolor属性：控制表格边框的颜色。

示例代码：

<table border="1" cellspacing="1" cellpadding="1" bordercolor="lightgray">
<thead>
<tr><th></th></tr>
</thead>
<tbody>
<tr><td></td></tr>
</tbody>
</table>

注意：表格单元格之间的边框线会重叠，因此需要将边框线合并处理，为表格添加：border-collapse:collapse样式。

table表格的表头固定

• 描述

当表格内容过多时出现滚动条时，需要将表头固定处理。

• 设置

为表格添加以下css样式：

table tbody{
display:block;
height:36rem; //此处表格tbody需要固定，采用百分比高度无法达到固定表头的效果。
overflow-y:scroll;
}
table thead,tbody tr{
display:table;
width:100%;
table-layout:fixed;
}
table thead{
width:calc(100%-1em)
}

表格单元格内容超出部分不换行用省略号显示

• 解决方案

为表格单元格td添加以下样式:

td{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}