如何在 WordPress 中使表头粘性：分步指南

在本文中，您将了解如何使默认 WordPress 表块的标题部分具有粘性。

当您想要向表格添加大量数据时，会占用网页上的大量空间，并且读者很难检查同一页面上的其他元素。因此，我们没有显示一个长表，而是添加一个可滚动的表，并将标题部分粘在顶部。

这样，表格将占用有限的空间，您可以添加任意数量的行，而不必担心前端的表格大小。

这非常适合在网站上显示长数据库表。

那么，让我们看看如何在 WordPress 表格中创建固定标题。

为此，您需要向您的网站添加几行 CSS 代码。您可以使用代码管理器插件为某些帖子类型或单个页面加载 css，也可以使用主题定制器中的其他 CSS 选项全局加载 css。

您可以关注视频来了解更多相关信息。

Wordpress 表中的粘性标题代码

.scrollable-table-container { overflow: hidden; } .wp-block-table { width: 100%; border-collapse: collapse; } .wp-block-table tbody { display: block; max-height: 300px; overflow-y: auto; } .wp-block-table thead, .wp-block-table tr { display: table; width: 100%; table-layout: fixed; } /* Sticky table headers */ .wp-block-table thead th { position: sticky; top: 0; background: #3a78e6; Color:white; z-index: 10; padding: 10px; border-bottom: 2px solid #ddd; } .wp-block-table thead { border-bottom: 0px solid; } .wp-block-table tbody tr td { padding: 10px; border-bottom: 1px solid #ddd; } .wp-block-table tbody::-webkit-scrollbar { width: 6px; } .wp-block-table tbody::-webkit-scrollbar-thumb { background-color: #aaa; border-radius: 10px; } .wp-block-table tbody::-webkit-scrollbar-track { background-color: #f1f1f1; }

在这里，正如您在上表中看到的，我们添加了 300 像素的高度，但如果我们保留普通表格，那么它可能会在页面上占用 700 像素或更高的高度。 （根据表数据）

因此，您可以在此处设置固定高度，然后用户可以滚动表格并读取整个表格数据。该表格具有完全响应能力，并且在台式机、平板电脑和移动设备上效果最佳。

您还可以关注这篇关于如何在 Blogger 和 WordPress 中添加响应式 HTML 表的文章。

您还可以通过修改 CSS 代码来更改标题背景颜色和文本颜色，如视频中所示。

要在 Blogger 中添加类似的粘性标题表，您可以使用以下代码。

 <div class="table-container"> <table class="sticky-header-table"> <thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> </thead> <tbody> <tr> <td>Item 1</td> <td>Item 2</td> <td>Item 3</td> </tr> <tr> <td>Item 1</td> <td>Item 2</td> <td>Item 3</td> </tr> <tr> <td>Item 1</td> <td>Item 2</td> <td>Item 3</td> </tr> <tr> <td>Item 1</td> <td>Item 2</td> <td>Item 3</td> </tr> <tr> <td>Item 1</td> <td>Item 2</td> <td>Item 3</td> </tr> <tr> <td>Item 1</td> <td>Item 2</td> <td>Item 3</td> </tr> <tr> <td>Item 1</td> <td>Item 2</td> <td>Item 3</td> </tr> <tr> <td>Item 1</td> <td>Item 2</td> <td>Item 3</td> </tr> <tr> <td>Item 1</td> <td>Item 2</td> <td>Item 3</td> </tr> <tr> <td>Item 1</td> <td>Item 2</td> <td>Item 3</td> </tr> </tbody> </table> </div> <style> .table-container { max-height: 300px; overflow-y: auto; overflow-x: auto; /* Enable horizontal scrolling */ border: 1px solid #ddd; padding: 0; margin: 0; -webkit-overflow-scrolling: touch; } .table-container::-webkit-scrollbar { width: 6px; height: 6px; } .table-container::-webkit-scrollbar-thumb { background-color: #aaa; border-radius: 10px; } .table-container::-webkit-scrollbar-track { background-color: #f1f1f1; } .sticky-header-table { width: 100%; border-collapse: collapse; table-layout: auto; min-width: 600px; } .sticky-header-table thead th { position: sticky; top: 0; background: #e64141; Color: white; z-index: 10; border-bottom: 2px solid #000; padding: 10px; text-align: left; box-sizing: border-box; } .sticky-header-table tbody tr td { padding: 10px; box-sizing: border-box; word-wrap: break-word; } /* Responsive adjustments */ @media (max-width: 600px) { .table-container { overflow-x: auto; } .sticky-header-table { width: 100%; min-width: 600px; } .sticky-header-table thead th, .sticky-header-table tbody tr td { padding: 5px; } } </style>

您所要做的就是更改表格数据并添加到帖子或页面的 HTML 部分。

相关资源：