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;
}
最后修改:2021 年 07 月 20 日 03 : 28 PM
如果觉得我的文章对你有用,请随意赞赏