如何使用超简单的HTML和CSS代码来实现固定列的表格

网创学长

于 2023-05-12 09:34:15 发布

阅读量1.4k

点赞数

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/qq_43320293/article/details/130635317

版权

在网页开发中，表格是一个非常常见的组件，并且对于大多数开发者而言，不可或缺。尤其是在需要展示数据时，表格更是成为了一个必须品。然而，在一些情况下，表格数据非常复杂，导致其中的一些列需要被固定，使得它们随着页面的滚动而保持在屏幕上方。本文将介绍如何使用超简单的HTML和CSS代码来实现固定列的表格。

创建一个基本的HTML文件首先，创建一个基本的HTML文件，并将其命名为“table.html”。接下来，我们需要在该文件中添加一些基本的HTML结构以及一个例子表格，如下所示：

<!DOCTYPE html> <html> <head> <title>Fixed Table</title> <style> /* custom styles go here */ </style> </head> <body> <table> <thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> <th>Header 4</th> <th>Header 5</th> <th>Header 6</th> </tr> </thead> <tbody> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> <td>Row 1, Column 3</td> <td>Row 1, Column 4</td> <td>Row 1, Column 5</td> <td>Row 1, Column 6</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> <td>Row 2, Column 3</td> <td>Row 2, Column 4</td> <td>Row 2, Column 5</td> <td>Row 2, Column 6</td> </tr> <tr> <td>Row 3, Column 1</td> <td>Row 3, Column 2</td> <td>Row 3, Column 3</td> <td>Row 3, Column 4</td> <td>Row 3, Column 5</td> <td>Row 3, Column 6</td> </tr> </tbody> </table> </body> </html>

添加CSS样式表接下来，我们需要在样式标签内添加一些自定义CSS样式。可以使用以下代码实现：

table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 8px; } thead th { background-color: #333; color: #fff; } tbody tr:nth-child(even) { background-color: #f2f2f2; } .fixed { position: absolute; left: 0; top: auto; }

上述代码实现了以下功能：

将表格的边框合并
将表格的宽度设置为100%
设置表头和单元格文本居左对齐，并给它们8像素的内边距
设置表头的背景颜色和文字颜色
设置隔行变色
定义一个名为“fixed”的CSS类，这个类将被用于实现固定列的表格

实现固定列现在，我们需要通过CSS来实现固定列。要做到这一点，我们将添加一些JavaScript代码以便追踪页面滚动的位置。当需要固定一些列时，我们可以假定其他列具有固定宽度，这样就可以在表格中创建一个新的table元素，而这个table元素中就包含了我们想要固定的某一列。

接下来，我们将展示如何通过CSS实现固定列。可以使用以下代码实现：

<!DOCTYPE html> <html> <head> <title>Fixed Table</title> <style> table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 8px; } thead th { background-color: #333; color: #fff; } tbody tr:nth-child(even) { background-color: #f2f2f2; } .fixed { position: absolute; left: 0; top: auto; } .fixed th, .fixed td { position: relative; z-index: 1; } .fixed th { left: 0; width: 100px; } tbody td { border-top-width: 0; border-bottom-width: 0; } </style> </head> <body> <table> <thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> <th>Header 4</th> <th>Header 5</th> <th>Header 6</th> </tr> </thead> <tbody> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> <td>Row 1, Column 3</td> <td>Row 1, Column 4</td> <td class="fixed"> <table> <thead> <tr> <th>Header 5</th> </tr> </thead> <tbody> <tr> <td>Row 1, Column 5</td> </tr> <tr> <td>Row 2, Column 5</td> </tr> <tr> <td>Row 3, Column 5</td> </tr> </tbody> </table> </td> <td>Row 1, Column 6</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> <td>Row 2, Column 3</td> <td>Row 2, Column 4</td> <td class="fixed"> <table> <thead> <tr> <th>Header 5</th> </tr> </thead> <tbody> <tr> <td>Row 1, Column 5</td> </tr> <tr> <td>Row 2, Column 5</td> </tr> <tr> <td>Row 3, Column 5</td> </tr> </tbody> </table> </td> <td>Row 2, Column 6</td> </tr> <tr> <td>Row 3, Column 1</td> <td>Row 3, Column 2</td> <td>Row 3, Column 3</td> <td>Row 3, Column 4</td> <td class="fixed"> <table> <thead> <tr> <th>Header 5</th> </tr> </thead> <tbody> <tr> <td>Row 1, Column 5</td> </tr> <tr> <td>Row 2, Column 5</td> </tr> <tr> <td>Row 3, Column 5</td> </tr> </tbody> </table> </td> <td>Row 3, Column 6</td> </tr> </tbody> </table> <script type="text/javascript"> const init = () => { window.addEventListener("scroll", function(e) { var distanceY = window.pageYOffset || document.documentElement.scrollTop, fixedTopEl = document.querySelectorAll(".fixed")[0]; if (distanceY > fixedTopEl.offsetTop) { fixedTopEl.style.top = distanceY + "px"; } else { fixedTopEl.style.top = ""; } }); }; init(); </script> </body> </html>

上面代码中，我们使用了position: absolute来把固定的单元格移到最左侧，并使用left: 0来使其靠左。另外，我们还需使用z-index: 1来确保它们在其他内容之前呈现。同时，使用JS监听页面滚动事件，并且对于第一个固定元素，通过一个if语句判断它是否已经滚动到了视口的顶部。如果是，则将固定区域的top设置为distanceY，否则将它置为空。

总结

固定列的表格在网页开发中是非常常见的组件，通过本文所介绍的HTML和CSS代码，可以轻松实现一个类似的效果。同时需要注意：如果固定表格中的内容包含多行、超链接或其他特殊内容类型，则可能会需要进行一些额外的调整。

网创学长

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
如何使用超简单的HTML和CSS代码来实现固定列的表格

在网页开发中，表格是一个非常常见的组件，并且对于大多数开发者而言，不可或缺。然而，在一些情况下，表格数据非常复杂，导致其中的一些列需要被固定，使得它们随着页面的滚动而保持在屏幕上方。本文将介绍如何使用超简单的HTML和CSS代码来实现固定列的表格。固定列的表格在网页开发中是非常常见的组件，通过本文所介绍的HTML和CSS代码，可以轻松实现一个类似的效果。同时需要注意：如果固定表格中的内容包含多行、超链接或其他特殊内容类型，则可能会需要进行一些额外的调整。接下来，我们将展示如何通过CSS实现固定列。
复制链接

扫一扫