table表格怎么样添加滚动条 表头不动，tbody滚动？
回答
云松回答
问题分析：
- 表格放在Div中，设定Div的宽度和高度（不能用百分比），并设置纵向滚动条始终显示。
- 设定表格的宽度比Div小一个滚动条的宽度（如Div宽度为500，滚动条宽度为16，则表格的宽度应该设置为500-16=484）。
- 表格采用 thead,th标签
问题解答：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>
<table >
<thead>
<tr>
<th>Header
1</th>
<th>Header
2</th>
<th>Header
3</th>
</tr></thead>
<tr>
<td> 1</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> 2</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> 3</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> 4</td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</body>
</html>
<style type="text/css">
div {
width:500px;
height:100px;
overflow-y:scroll; /*纵向滚动条始终显示 */
overflow-x:none;
}
table {
width:484px; /*表格宽度＝div宽度(500px)－滚动条宽度(16px) */
}
thead tr {
position: relative; TOP:0px; /*绝对定位 */
background:#cccccc;
}
tr {
background:#222222;
}
</style>
(0)
相似问题