在表格中的列标题上方放置总计行的有效方法答案

【问题标题】：Valid way of putting a totals row above the column headers in a table在表格中的列标题上方放置总计行的有效方法
【发布时间】：2014-04-17 16:30:43
【问题描述】：

问题是是否有一种有效的（合乎逻辑的）方法可以在 HTML 中构造一个在列标题上方有总计行的表格。所以基本上它会是这样的：

Date      | [Total number of dogs] | [Total number of cats] | [Total number of snakes]

                   Dogs            |         Cats           |           Snakes

[Date1]   |     [DogsThatDay       |       [CatsThatDay]    |        [SnakesThatDay]

等等等等……

通常狗猫蛇会进入头，但我希望总数高于。

将我的总计放入thead 然后将列标题作为另一行放入实际的tbody 似乎不正确。有没有其他方法可以做到这一点？

【问题讨论】：

标签： html html-table

【解决方案1】：

您可以在“thead”标签中添加多行：

<thead>
    <tr>
        <th>Date</th>
        <th>[Total number of dogs]</th>
        <th>[Total number of cats]</th>
        <th>[Total number of snakes]</th>
    </tr>
    <tr>
        <th>[Date1]</th>
        <th>Dogs</th>
        <th>Cats</th>
        <th>Snakes</th>
    </tr>
</thead>
<tbody>
    <tr>
     ...content
    </tr>
</tbody>

表格加载完成后，使用js将计数加载到标题列中。

【讨论】：