HTML 表格 - 我可以在thead 之前有一个额外的 tbody 吗？

Question

我需要在表格顶部添加一些与所述表格的列一致的元素。

此表包含一个<thead>（由于 jquery.tablesorter 插件，这是必需的）。我假设如果我将另一个<tbody> 放在<thead> 的顶部，我将能够使这些元素与其余列保持一致，但是chrome 和firefox 都会在<thead> 下方渲染每个<tbody>。

例子：

<table>
    <tbody>
        <tr>
            <td>1</td><td>1</td><td>1</td>
        </tr>
    </tbody>
    <thead>
        <tr>
            <th>head</th><th>head</th><th>head</th>
        </tr>
    </thead>        
    <tbody>
        <tr>
            <td>2</td><td>2</td><td>2</td>
        </tr>
        <tr>
            <td>3</td><td>3</td><td>3</td>
        </tr>
        <tr>
            <td>4</td><td>4</td><td>4</td>
        </tr>
    </tbody>
</table>

虽然我理解这一点，但我仍然需要找到一种方法让这些元素与特定列保持一致。

Answer 1

您可以像这样在<thead> 中使用多行：-

<table>

   <thead>

     <tr> <td>1</td> <td>1</td> </tr>

     <tr> <td>head</td> <td>head</td> </tr>

   </thead>

</table>

Answer 2

我建议您使用 id (#) 标记来标识您希望 js 处理的部分并让 js 使用该 id。

这样，thead 在前，tbody 在后。

您所描述的变体可能有效-在您现在使用的浏览器中，在您还可以的操作系统上-并且可能符合特定版本的 HTML 规范-但是以不寻常的顺序排列是（根据我的经验）只是那种在任何地方都不能工作或工作相同的事情，最终会导致很多挫败感，尤其是当网站变得越来越复杂时。

Answer 3

一种解决方案是在您的头中使用一个 tr 内的另一个表。虽然，这是一个完全丑陋的解决方案。

您还可以使用 CSS 在表格上方放置一个 div。

Answer 4

正确的表结构是：

<table>
    <thead>
        <tr>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th></th>
            <th></th>
        </tr>
    </tfoot>
</table>

<thead> 将始终位于顶部，<tfoot> 将始终位于底部。

---

使用jQuery，您可以通过以下方式交换<thead> 和<tbody> 内容：

$(document).ready(function() {
    $('#myTrigger').click(function() {
        var top = $('thead').html();
        var mid = $('tbody').html();
        $('thead').html(mid);
        $('tbody').html(top);
    });
});