Question

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

此表包含<thead>（由于jquery.tablesorter插件而需要）。我假设如果我在<tbody>之上放置另一个<thead>，我可以将这些元素与其余列保持一致，但chrome和firefox都会为每个<tbody>呈现低于<thead>。

示例：

<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

一种解决方案是在你的thead中使用一个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);
    });
});

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

4 个答案: