<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
thead td{
width: 1%;
}
table thead,
tbody tr {
display: table;
width: 99%;
table-layout: fixed;
}
table thead {
width: calc( 100% - 1em)
}
tbody td{
border: 1px solid #eee;
height: 40px;
}
</style>
</head>
<body>
<div style="height:280px; width: 800px;border:1px solid red;">
<table style="width: 100%;border-collapse: collapse;" cellpadding=0 cellspaceing=0>
<thead style="font-size: 15px;text-align:center;display:block;border-bottom:1px solid #e8e8e8;">
<tr style="">
<td style="height:54px;">测站名称</td>
<td style="">管理单位</td>
<td style=" ">建设单位</td>
<td style=" ">最新到报时间</td>
<td style="">应该到报数</td>
<td style=" ">实际到报数</td>
<td>测站运行状态</td>
</tr>
</thead>
<tbody id="tab" style="text-align:center;overflow-y:auto;height:210px;display:block;font-size: 14px;">
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
以上代码是实现了,table的表头不动,内容实现滚动效果;
效果图:
效果如图
做这个效果的时候,查了一些资料,有的说是两个table来做,有的是两个div来做,都比较麻烦,这个是充分利用了table的thead 和tbody标签,实现这个效果
但是css属性中有一个
width:1% 这个属性,查到了一篇文章深入理解1% table-cell width
image.png
作者发表于2015年,唉,为自己的技术汗颜啊.
所以这个表格的大小是根据单元格的大小确定的。有前端基础的都知道，表格中每个单元格是有自己的最小宽度的，这样我们设置了”width: 1%”实际上是设置table的大小为单元格的最小宽度的100倍。但是很明显，表格是不可能这么宽的，这里可以理解为让表格的宽度尽可能的宽。而且根据单元格必须填满表格一行的特性，就自然呈现出这样的效果。
为了验证，你把width设置为10%时，你会发现表格变小了，也是因为表格大小变成了最小单元格的宽度的10倍，这样也可以解释了
另外如果我把width设置为100%时，会发现第一个单元格非常大然而，其他的也还是存在，但是都被压缩了。我是这样理解的——首先第一个单元格的宽度为100%的话，那么就是表格的大小了，但是这一行还有其他的单元格存在，它是不可能达到100%的，所以第一个尽可能宽，而其他的也能有最小宽度。
