0

我怎样才能实现这种表：

在此处输入图像描述

在 Schedule 列内，有子列（Jan、Feb 等）。

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

但它不起作用。

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

4

4 回答 4

3
  • 解决方案是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 步：

要使“估计预算”单元格跨越这 2 行，<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>

于 2013-01-29T05:29:09.273 回答
1

您使用colspanSchedule 上的属性th。它将使它跨越许多列。

用于rowspan预算th将对行产生相同的影响。

于 2013-01-29T05:23:04.887 回答
0

试试这个（注意使用 colspan）：

<table border="1">
  <tr>
    <td>budget</td>
    <td colspan="3">header</td>
  </tr>
  <tr>
    <td></td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
    <td>d</td>
  </tr>
</table>

如果您需要更复杂的表格布局，可以使用我的http://blocknote.net编辑器。表格编辑器很方便。

于 2013-01-29T05:26:50.050 回答
-1 
<table>
<tr>
    <td>foo</td>
    <td colspan="3">Header</td>
  </tr>
  <tr>
    <td></td>
    <td>Content</td>
    ...
  </tr>
  <tr>
    <td>foo1</td>
    <td>foo2</td>
    ...
  </tr>
</table>
于 2013-01-29T05:37:04.093 回答