javascript - 在窗口可调表上寻找固定标题

Question

我试过到处寻找，但找不到解决我问题的好方法。我希望创建一个带有固定标题的表格，这些标题在滚动表格的其余部分时会保留下来。问题是我还希望它能够在页面窗口调整时对齐。我已经能够获得固定的标题，并且能够在调整窗口时使列对齐，只是无法让两者一起工作。那里有可以做到这一点的脚本吗？我试过 fixedheadertable jquery、flexigrid、fixed-header-coffee、chromatable 和 floatyhead。这些都不能给我我正在寻找的解决方案。也许我做错了什么，但我有一个使用 theader、tbody 等的传统表。我想避免将表分成两个表，因为它们似乎永远不会正确排列，但如果这是唯一的解决方案，我会拿去吧。

请帮忙!

Answer 1

您可以只使用标准的 HTML/CSS。具体来说，在 CSS 中使用 display/overflow/height，在 HTML 中使用 thead/tbody。示例 CSS:

.scrollableTable tbody {
    display: block;
    overflow-y: auto;
    width: 100%;
    height: 50px;
}
.scrollableTable tr {
    display: block;
}
.scrollableTable td, .scrollableTable th {
    width: 50%;
}

示例 HTML:

<table class="scrollableTable">
    <thead>
        <tr>
            <th>Fruit</th>
            <th>Color</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Apples</td>
            <td>Red</td>
        </tr>
        <tr>
            <td>Bananas</td>
            <td>Yellow</td>
        </tr>
        <tr>
            <td>Oranges</td>
            <td>Orange</td>
        </tr>
    </tbody>
</table>