首先我们可以使用CSS中的position属性来实现表格的固定。具体流程如下:
首先我们可以使用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第一行或某几行不随滚动条滚动而滚动


基础教程推荐
猜你喜欢
- 绝对定位的元素在ie6下不显示隐藏了的有效解决方法 2023-12-11
- javaScript 删除确认实现方法小结 2024-01-08
- js实现网页防止被iframe框架嵌套及几种location.href的区别 2024-01-07
- JavaScript中常见的几种获取元素的方式 2023-07-10
- CSS实现当鼠标移到input上时鼠标变为不可输入的状态 2023-12-29
- css中position:fixed实现div在窗口上下左右居中 2023-12-12
- JavaScript图表插件highcharts详解 2023-12-28
- 使用HTML5原生对话框元素并轻松创建模态框组件 2023-12-19
- 实现瀑布流布局的三种方式 2023-08-08
- div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox 2024-01-23