HTML表格-在thead之前可以再加上一個提示嗎？

Question

我需要在表格頂部添加一些與所述表格的列對齊的元素。

該表包含一個<thead> （由於jquery.tablesorter插件而需要）。 我假設，如果在<thead>頂部放置另一個<tbody> ，則可以使這些元素與其余列保持一致，但是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);
    });
});