极客教程HTML 可滚动表格，带有固定列和表头，借助现代 CSS
在本文中，我们将介绍如何使用现代 CSS 创建一个可滚动的 HTML 表格，该表格具有固定的列和表头。在现代网页设计中，滚动表格是非常常见的需求，特别是当表格的行数很多时。通过固定表头和列，用户可以在滚动表格时保持对表格内容的核心信息的可见性，提供更好的浏览体验。
阅读更多：HTML 教程
1. 创建基本的 HTML 结构
首先，我们需要创建一个基本的 HTML 结构来容纳我们的可滚动表格。以下是一个简单的示例：
在这个简单的示例中，我们创建了一个包含一个表格的 div 容器。表格拥有一个 thead 元素来包含表头行和一个 tbody 元素来容纳表格的内容行。每个表头单元格用 th 标签来定义，而表格内容则使用标准的 tr 和 td 标签。
2. 添加 CSS 样式
接下来，我们将使用 CSS 来控制表格的显示和滚动行为。这里使用了一些现代的 CSS 技术，如 flex 布局、sticky 定位和 overflow 属性。在一个单独的样式表文件（styles.css）中，我们可以添加以下样式：
通过上述 CSS 样式，我们将表格容器 .table-container 设置为占据整个宽度，并且最大高度为 400px，当表格内容过多时会显示滚动条。表格使用 border-collapse: collapse; 属性使边框合并，提供更清晰的表格外观。
为表头的 th 添加了粘性定位（position: sticky;）以保持其在滚动时固定在顶部（top: 0;）。同时，我们为 th 和 td 添加了一些基本的样式，如内边距、文本居左对齐和边框。
请注意，这只是一个简单的示例，你可以根据自己的需求自定义样式。
3. 表格内容和列宽
最后，我们需要添加实际的表格内容，并为每列指定相应的宽度。
在 tbody 元素内部，我们可以添加每行的内容。每个 td 元素对应表格中每个单元格的内容。你可以根据需要添加更多的行和列。
要指定每列的宽度，我们可以使用 CSS 样式。例如，如果我们想要第一列的宽度为 200px，可以在样式表中添加以下规则：
这个规则将对每个第一个 td 和 th 元素应用，从而将其宽度固定为 200px。你可以根据需要调整每列的宽度。
总结
本文介绍了如何使用现代 CSS 创建一个可滚动的 HTML 表格，该表格具有固定的列和表头。通过 HTML 结构和 CSS 样式，我们可以确保表头和列在滚动时保持固定，提供更好的用户浏览和查看体验。
通过使用基本的 HTML 知识和现代的 CSS 技术，我们可以轻松地创建一个功能丰富的滚动表格，以适应不同的网页设计需求。希望本文能对你学习和实践有所帮助！