HTML 中主表头内的表头

Question

我怎样才能实现这种表：

在“计划”列内，有子列（一月、二月等）。

我试过<th></th>里面<th></th>

但它不起作用。

看我的小提琴： http: //jsfiddle.net/TAJzY/1/

Answer 1

• 解决方案是colspan=""和rowspan=""：
  • 用于colspan="12"“活动时间表/里程碑”单元格。
    • 并删除同一<tr>行中 12 个空的尾部单元格。
  • 用于rowspan="2"“估计预算”单元格。
    • <th>并从下面删除单个空的初始单元格<tr>。
• 不要忘记使用显式<thead>、<tbody>和 可选<tfoot>部分。
  • 虽然您可以使用没有显式部分的 HTML 表格，但通过这种方式使用 CSS 设计 HTML 表格的样式要容易得多且有效，并且您可以使用thead { position: sticky; }Excel 样式的“冻结”行等技术，否则这些技术的实现会非常困难 - 或者只是乏味 -否则。

步骤1：

首先，制作一个表格，没有任何单元格的拆分/合并，所以你有这样的东西（单击下面的“运行代码片段”按钮查看表格）：

table { border: 1px outset #bbb; }
table > * > tr > * { border: 1px inset #bbb; }

thead { background-color: #7ACABD; text-align: center; }
tbody { background-color: #e0fffa; }
tfoot { background-color: #39c4ae' }

<table>
    <thead>
        <tr>
            <th>Estimated Budget</th>
            <th>Schedule/Milestone of Activities</th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
        <tr>
            <th></th>
            <th>Jan</th>
            <th>Feb</th>
            <th>Mar</th>
            <th>Apr</th>
            <th>May</th>
            <th>Jun</th>
            <th>Jul</th>
            <th>Aug</th>
            <th>Sep</th>
            <th>Oct</th>
            <th>Nov</th>
            <th>Dec</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>$123</td>
            <td>j</td>
            <td>f</td>
            <td>m</td>
            <td>a</td>
            <td>m</td>
            <td>j</td>
            <td>j</td>
            <td>a</td>
            <td>s</td>
            <td>o</td>
            <td>n</td>
            <td>d</td>
        </tr>
         <tr>
            <td>$456</td>
            <td>j</td>
            <td>f</td>
            <td>m</td>
            <td>a</td>
            <td>m</td>
            <td>j</td>
            <td>j</td>
            <td>a</td>
            <td>s</td>
            <td>o</td>
            <td>n</td>
            <td>d</td>
        </tr>
    </tbody>
    </table>

第2步：

然后使“活动的时间表/里程碑”单元格跨越所有剩余的 12 列（总共 13 列）colspan="12"- 这也意味着删除空的尾随元素，与单元格现在表示的元素<th></th>相同：<tr><th colspan="12">

table { border: 1px outset #bbb; }
table > * > tr > * { border: 1px inset #bbb; }

thead { background-color: #7ACABD; }
tbody { background-color: #e0fffa; }
tfoot { background-color: #39c4ae' }

<table>
    <thead>
        <tr>
            <th>Estimated Budget</th>
            <th colspan="12">Schedule/Milestone of Activities</th>
        </tr>
        <tr>
            <th></th>
            <th>Jan</th>
            <th>Feb</th>
            <th>Mar</th>
            <th>Apr</th>
            <th>May</th>
            <th>Jun</th>
            <th>Jul</th>
            <th>Aug</th>
            <th>Sep</th>
            <th>Oct</th>
            <th>Nov</th>
            <th>Dec</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>$123</td>
            <td>j</td>
            <td>f</td>
            <td>m</td>
            <td>a</td>
            <td>m</td>
            <td>j</td>
            <td>j</td>
            <td>a</td>
            <td>s</td>
            <td>o</td>
            <td>n</td>
            <td>d</td>
        </tr>
         <tr>
            <td>$456</td>
            <td>j</td>
            <td>f</td>
            <td>m</td>
            <td>a</td>
            <td>m</td>
            <td>j</td>
            <td>j</td>
            <td>a</td>
            <td>s</td>
            <td>o</td>
            <td>n</td>
            <td>d</td>
        </tr>
    </tbody>
    </table>

步骤3：

为了使“估计预算”单元格跨越这两行，请<thead>添加并删除第二行中的rowspan="2"空首字母（因为该空单元格的“槽位”现在由前一行中的占据）。<th></th><tr><th><th rowspan="2">

就像这样：

table { border: 1px outset #bbb; }
table > * > tr > * { border: 1px inset #bbb; }

thead { background-color: #7ACABD; }
tbody { background-color: #e0fffa; }
tfoot { background-color: #39c4ae; }

/* Right-align budget numbers in the first column: */
table > tbody > tr > td:first-child { text-align: right; }

<table>
    <thead>
        <tr>
            <th rowspan="2">Estimated Budget</th>
            <th colspan="12">Schedule/Milestone of Activities</th>
        </tr>
        <tr>
            <th>Jan</th>
            <th>Feb</th>
            <th>Mar</th>
            <th>Apr</th>
            <th>May</th>
            <th>Jun</th>
            <th>Jul</th>
            <th>Aug</th>
            <th>Sep</th>
            <th>Oct</th>
            <th>Nov</th>
            <th>Dec</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>$123</td>
            <td>j</td>
            <td>f</td>
            <td>m</td>
            <td>a</td>
            <td>m</td>
            <td>j</td>
            <td>j</td>
            <td>a</td>
            <td>s</td>
            <td>o</td>
            <td>n</td>
            <td>d</td>
        </tr>
         <tr>
            <td>$456</td>
            <td>j</td>
            <td>f</td>
            <td>m</td>
            <td>a</td>
            <td>m</td>
            <td>j</td>
            <td>j</td>
            <td>a</td>
            <td>s</td>
            <td>o</td>
            <td>n</td>
            <td>d</td>
        </tr>
    </tbody>
    </table>