<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Frozen Columns in DataGrid - jQuery EasyUI Demo</title>
<style>
*{
margin: 0;
padding: 0;
}
table, tr, td, th, thead {
text-align: center;
vertical-align: middle;
}
table{
width: 100%;
/*table-layout: fixed;*/
border : 0px;
}
thead{
background-color: #006699;
color: white;
}
table th {
top:0;
position: sticky;
height: 30px;
background-color: #006699;
}
/*设置倒数第二个 右边内边距*/
table tr th:nth-last-child(2), table tr td:nth-last-child(2){
padding-right: 170px;
}
/*设置倒数第一个 固定*/
table tr th:last-child, table tr td:last-child {
width:150px ;
text-align: center;
position: fixed;
right: 0;
z-index: 2;
}
</style>
</head>
<body>
<table id="townTable" class="table table-hover table-bordered table-sm table-striped">
<thead>
<tr>
<th>行号</th>
<th>编号</th>
<th>班级</th>
<th>老师</th>
<th>人数</th>
<th>联系人</th>
<th>位置</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr><tr>
<td>1</td>
<td>123</td>
<td>B21</td>
<td>alex</td>
<td>45</td>
<td>dolly</td>
<td>beijing</td>
</tr>
</tbody>
</table>
</body>
</html>
表格
最新推荐文章于 2024-06-13 19:58:09 发布
本文介绍了一种使用HTML和CSS实现DataGrid中FrozenColumns的技术。通过将最后一列设置为固定位置,确保了在滚动表格时关键信息始终可见。同时,通过调整倒数第二列的内边距,优化了表格的布局。
2137

被折叠的 条评论
为什么被折叠?



