带有colspan的HTML表显示错误

Question

我已经创建了一个表，其中所有标头都具有colspan = 2 ，并且某些主体单元格具有colspan = N。

在某些情况下显示会中断：

td, th {
  border: solid #aaa 1px
}

<table>
  <thead>
    <tr>
      <th colspan="2" scope="col">8 AM</th>
      <th colspan="2" scope="col">9 AM</th>
      <th colspan="2" scope="col">10 AM</th>
      <th colspan="2" scope="col">11 AM</th>
    </tr>
  </thead>
  <tbody>
    <tr>

      <td colspan="5"><span>-</span></td>

      <td><a href="#">+</a></td>
      <td><a href="#">+</a></td>
      <td><a href="#">+</a></td>

    </tr>
  </tbody>
</table>

请注意“-”单元格，该单元格应延伸到“ 10 AM”列的中心，但不会。

可能是什么原因？

Answer 1

我想你想要这样的东西！

<tbody>
    <tr>
      <td colspan="4"><span>-</span></td>
      <td><a href="#">+</a></td>
      <td><a href="#">+</a></td>
      <td><a href="#">+</a></td>
      <td><a href="#">+</a></td>
    </tr>
  </tbody>