如何创建嵌套的四列 table 布局？

Question

我正在尝试创建一个嵌套的 4 列 table 布局，请参见下图。但是，我不确定，如何添加最后一行数据，所以它嵌套在 Date 行下面。我提供了 codepen 中的一个片段，它显示了这个问题。谁能提供任何帮助？

图片

代码段：

<table>
  <thead>
    <tr colspan="5">
      <th>Regian</th>
      <th>Q1 2010</th>
      <th>Q2 2010</th>
      <th>Q3 2010</th>
      <th>Q4 2010</th>
    </tr>
  </thead>
  <tbody className="labels">
    <tr>
      <td colSpan="5">
        <label htmlFor="accounting">Accounting</label>
        <input
          type="checkbox"
          name="accounting"
          id="accounting"
          data-toggle="toggle"
        ></input>
      </td>
    </tr>
  </tbody>
  <tbody className="hide" id="accounting-data">
    <tr>
      <td>Date</td>
      <td>Australia</td>
      <td>,544.00</td>
      <td>,834.00</td>
      <td>,583.00</td>
      <tr>
        <td>Central America</td>
        <td>,685.00</td>
        <td>,544.00</td>
        <td>,834.00</td>
        <td>,583.00</td>
      </tr>
    </tr>
  </tbody>
</table>

Answer 1

你那里有几个语法错误，除了单元格上缺少 rowspan 之外，你的 html 中的列比你的示例显示的要多。请参阅下面的更新示例。也不确定所有单独的 tbody 标签是否都有某种用途，但为您保留了它们，因为从技术上讲它仍然是有效的标记。干杯。

table {
  border-collapse: collapse;
}

td, th {
  border: #0f0 1px solid;
  padding: .2rem;
}

<table>
  <thead>
    <tr colspan="5">
      <th>Regian</th>
      <th>Q1 2010</th>
      <th>Q2 2010</th>
      <th>Q3 2010</th>
      <th>Q4 2010</th>
    </tr>
  </thead>
  <tbody className="labels">
    <tr>
      <td colSpan="5">
        <label htmlFor="accounting">Accounting</label>
        <input
          type="checkbox"
          name="accounting"
          id="accounting"
          data-toggle="toggle"
        />
      </td>
    </tr>
  </tbody>
  <tbody className="hide" id="accounting-data">
    <tr>
      <td rowspan="2" style="vertical-align: top">Date</td>
      <td>Australia</td>
      <td>,544.00</td>
      <td>,834.00</td>
      <td>,583.00</td>
    </tr>
    <tr>
      <td>Central America</td>
      <td>,685.00</td>
      <td>,544.00</td>
      <td>,834.00</td>
    </tr>
  </tbody>
</table>

如何创建嵌套的四列 table 布局？

How to create a nested four column table layout?

html

html-table

html-tbody