CSS 带有固定标题和可调整列宽的表格，不使用JQuery
在本文中，我们将介绍如何使用纯CSS实现带有固定标题和可调整列宽的表格，而无需使用https://sotoolbox.com/tag/css target="_blank" rel="nofollow">JQuery。通过这种方法，您可以轻松地在网页上创建具有吸顶效果的表头，并能够通过拖拽调整列宽，提升用户体验。
阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程
1. 创建基本表格结构
首先，我们需要创建一个基本的HTML表格结构。代码如下：
<div class="table-wrapper">
<table>
<thead>
<tr>
<th>列1</th>
<th>列2</th>
<th>列3</th>
<th>列4</th>
</tr>
</thead>
<tbody>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
<td>内容4</td>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
<td>内容4</td>
</tr>
<!--更多的表格行-->
</tbody>
</table>
</div>
上面的代码创建了一个包含表格头部（thead）和表格体（tbody）的HTML表格。您可以根据需要添加更多的表格行。为了实现固定标题和可调整列宽的效果，我们将为表格添加一些样式。
2. CSS样式
下面是所需的CSS样式：
.table-wrapper {
overflow: auto;
height: 200px; /*设定表格的高度*/
}
table {
width: 100%;
border-collapse: collapse; /*合并边框*/
table-layout: fixed; /*固定表格布局*/
}
th,
td {
padding: 10px;
text-align: left;
white-space: nowrap; /*防止文字换行*/
}
thead {
position: sticky;
top: 0;
background-color: #f9f9f9;
z-index: 1;
}
tbody tr:nth-child(2n) {
background-color: #f9f9f9;
}
上述CSS样式中，我们通过给外部容器div设置overflow: auto;和height: 200px;来限制表格的高度，并添加滚动条以防止表格过长导致页面溢出。
我们为表格添加了width: 100%;以使表格充满父容器的宽度，并使用border-collapse: collapse;将边框合并为单一线条。
我们还使用table-layout: fixed;来固定表格布局，这样可以确保列宽能够根据我们设定的值自动调整。
为了实现固定标题的效果，我们使用position: sticky;和top: 0;将表头固定在页面顶部，并给它一个背景色以区分表头和表格内容。
最后，我们通过为表格的偶数行设置background-color: #f9f9f9;来给表格添加斑马纹样式，使其更易读。
3. 调整列宽
现在，我们已经完成了具有固定标题的表格样式。接下来，让我们看看如何实现可调整列宽的效果。
我们将使用CSS的:hover伪类和resize属性来实现拖拽调整列宽。代码如下：
th:hover {
resize: horizontal;
cursor: col-resize;
}
上述代码将在鼠标悬停在表头上时，将鼠标样式更改为水平调整大小，并允许用户通过拖拽表头来调整列宽。
4. 示例
让我们通过一个示例来演示如何使用纯CSS实现带有固定标题和可调整列宽的表格。
<!DOCTYPE https://sotoolbox.com/tag/css target="_blank" rel="nofollow">html>
<https://sotoolbox.com/tag/css target="_blank" rel="nofollow">html>
<head>
<title>https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS Table with Sticky Header and Resizable Columns</title>
<link rel="stylesheet" type="text/https://sotoolbox.com/tag/css target="_blank" rel="nofollow">css" href="styles.css">
</head>
<body>
<div class="table-wrapper">
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>国家</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
<td>男</td>
<td>中国</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>男</td>
<td>美国</td>
</tr>
<tr>
<td>王五</td>
<td>28</td>
<td>女</td>
<td>英国</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
将上述代码保存为index.html，并创建一个styles.css文件，并将上述CSS样式代码复制到其中。
在浏览器中打开index.html文件，您将看到一个具有固定标题和可调整列宽的表格。您可以尝试通过拖拽表头来调整列宽以查看效果。
总结
通过本文，我们学习了如何使用纯CSS实现带有固定标题和可调整列宽的表格，而不需要使用https://sotoolbox.com/tag/css target="_blank" rel="nofollow">JQuery。通过添加相应的CSS样式，我们能够轻松地创建具有吸顶效果的表头，并通过拖拽调整列宽以提升用户体验。这个技巧可以在网页设计和开发中广泛应用，使表格更加灵活和易用。希望本文能对您有所帮助！
此处评论已关闭