首先我们可以使用CSS中的position属性来实现表格的固定。具体流程如下:
- 首先,我们可以将表格的头部固定在画面的顶部,使其不随着滚动条滚动而滚动。将表格分为表头和表体两部分,然后给表头添加CSS样式:
thead {
position: fixed;
top: 0;
}
这里给表头设置了position: fixed
属性,然后将top
属性设置为0,就将表头固定在了画面的顶部。
- 接着,我们需要为表格的主体部分添加一些样式,将其顶部与表头位置对齐,避免表头与表格主体发生重叠。同时,还需要为表格主体添加
margin-top
属性,将它们与固定在顶部的表头合理地分隔开来。
tbody {
display: block;
margin-top: 50px; /* 这个高度需要根据实际情况进行调整 */
}
tbody tr {
display: table;
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
td {
padding: 5px;
text-align: center;
border: 1px solid black;
}
这里给tbody设置了display: block
属性,将其改为块级元素,然后指定一个margin-top
值。将tbody中的每行tr改为一个表格,然后为表格中的每个单元格td添加一些样式。
- 最后,我们需要为表格主体的第一行添加一些样式,使其与表头风格一致。
tbody tr:first-child {
background-color: #ccc;
}
这里为表格主体中的第一行添加了一个背景色。
通过以上三条CSS规则,我们就可以实现固定表格第一行不随滚动条滚动而滚动。
示例1:表格固定第一行
<table>
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>101</td>
<td>张三</td>
<td>20</td>
</tr>
<tr>
<td>102</td>
<td>李四</td>
<td>22</td>
</tr>
<tr>
<td>103</td>
<td>王五</td>
<td>23</td>
</tr>
</tbody>
</table>
<style>
thead {
position: fixed;
top: 0;
}
tbody {
display: block;
margin-top: 30px;
}
tbody tr {
display: table;
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
tbody tr:first-child {
background-color: #ccc;
}
td {
padding: 5px;
text-align: center;
border: 1px solid black;
}
</style>
示例2:表格固定前两行
<table>
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>101</td>
<td>张三</td>
<td>20</td>
</tr>
<tr>
<td>102</td>
<td>李四</td>
<td>22</td>
</tr>
<tr>
<td>103</td>
<td>王五</td>
<td>23</td>
</tr>
</tbody>
</table>
<style>
thead {
position: fixed;
top: 0;
}
tbody {
display: block;
margin-top: 60px;
}
tbody tr {
display: table;
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
tbody tr:nth-child(-n+2) {
background-color: #ccc;
}
td {
padding: 5px;
text-align: center;
border: 1px solid black;
}
</style>
以上就是固定表格某行不随滚动条滚动而滚动的完整攻略。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:固定Table第一行或某几行不随滚动条滚动而滚动 - Python技术站