原生table:表格table中thead固定,tbody超出高度出现滚动条
首先认识一下表格的table-layout属性tableLayout 属性用来显示表格单元格、行、列的算法规则。tableLayout有如下三个值:autofixedinherit值描述auto默认。列(td,th)宽度由单元格内容设定。(1) 给td指定的width不一定生效,td的width会自动调整(2) text-overflo...
·
首先认识一下表格的table-layout属性
tableLayout 属性用来显示表格单元格、行、列的算法规则。
tableLayout有如下三个值:auto fixed inherit
值 | 描述 |
---|---|
auto | 默认。列(td,th)宽度由单元格内容设定。 (1) 给
|
fixed | 列宽由表格宽度和列宽度设定。 (1) 给
|
inherit | 规定应该从父元素继承 table-layout 属性的值。 |
注意:
td
的text-overflow : ellipsis
和overflow : hidden
都会起作用,但是这里也有几个地方要注意:text-overflow : ellipsis
生效的前提是overflow
不为visible
,最好是类似hidden
的值- 需要指定
table
的width
- 如果
td
的宽度加起来超过table
的width
,即使给table
加上overflow:hidden
,td
也不会被隐藏。
表格table中thead固定,tbody超出高度出现滚动条,css可进行如下设置
table tbody {
display: block;
height: 195px;
overflow-y: scroll;
}
table thead,
tbody tr {
display: table;
width: 100%;
table-layout: fixed;/*重要 表格固定算法*/
}
table thead {/*留出滚动条的位置*/
width: calc(100% - 1em)
}
table thead th {
background: #ccc;
}
例子如下
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>表格table种tbody超出高度加滚动条</title>
<style>
table tbody {
display: block;
height: 195px;
overflow-y: scroll;
}
table thead,
tbody tr {
display: table;
width: 100%;
table-layout: fixed;
}
table thead {
width: calc(100% - 1em)
}
table thead th {
background: #ccc;
}
</style>
</head>
<body>
<table width="80%" border="1">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>出生年月</th>
<th>手机号码</th>
<th>单位</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>张三封</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴与四十大盗</td>
</tr>
<tr>
<td>张小三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>腾讯科技</td>
</tr>
<tr>
<td>张三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>浏阳河就业</td>
</tr>
<tr>
<td>张三疯子</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>张三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>张大三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>张三五</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>张刘三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>张三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
</tbody>
</table>
</body>
</html>
更多推荐
已为社区贡献6条内容
所有评论(0)