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

Question

我正在尝试创建一个嵌套的4列表布局，请参见下图。但是，我不确定如何添加最后一行数据，因此它嵌套在日期行下面。我已经提供了来自a

图像

代码段：

<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>$3,544.00</td>
      <td>$5,834.00</td>
      <td>$10,583.00</td>
      <tr>
        <td>Central America</td>
        <td>$7,685.00</td>
        <td>$3,544.00</td>
        <td>$5,834.00</td>
        <td>$10,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>$3,544.00</td>
      <td>$5,834.00</td>
      <td>$10,583.00</td>
    </tr>
    <tr>
      <td>Central America</td>
      <td>$7,685.00</td>
      <td>$3,544.00</td>
      <td>$5,834.00</td>
    </tr>
  </tbody>
</table>