这里有一个简单的表代码。
这是它的jsfiddle代码-jsfiddle链接
问题是,当head
得到position : fixed
时,它只是失去了table-
的所有属性,例如整个宽度、每个单元宽度。
所以我很乐意知道的是,有没有办法解决它?
感谢的任何帮助
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
table {
width: 100%;
}
th td {
width:25%;
}
thead {
background-color: #f00;
position: fixed;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
</tbody>
</table>
</body>
</html>
请尝试使用以下css
thead > tr> th {width: 330px;}
如果位置是固定的,它会自动获得宽度,如果你为第个设置宽度,那么它似乎是正确的。
更新css
table {
width: 100%;
}
th td {
width:25%;
}
thead {
background-color: #f00;
position: fixed;
width: 100%;
left: 0;
right: 0;
}
thead th{width: 2000px}