colspan属性不生效求助：嵌套表格无法跨4列显示

嘿，我仔细看了你的代码和遇到的问题，其实不是colspan的用法有误，而是嵌套的子表格没有设置宽度导致的！

你已经给父表格的<td>设置了colspan="4"，这个单元格确实已经占据了4列的位置，但里面的子表格默认只会根据自身内容的宽度来显示，不会自动填满整个跨列的单元格，所以看起来就像只挤在第一列里了。

解决方法很简单： #

给嵌套的子表格添加width:100%的样式，让它撑满整个父单元格的宽度。

修改后的代码片段：

<table>
  <tr>
    <th>Phasen Name</th>
    <th>Planned Value</th>
    <th>Actual Cost</th>
    <th>Earned Value</th>
  </tr>
  <th:block th:each="eintrag : ${evaPhasen}">
    <tr>
      <td class="accordion" th:text="${eintrag.key}"></td>
      <td th:text="${eintrag.value.getPlannedValue()}"></td>
      <td th:text="${eintrag.value.getActualCost()}"></td>
      <td th:text="${eintrag.value.getEarnedValue()}"></td>
    </tr>
    <tr style="display:none">
      <td colspan="4">
        <!-- 给子表格添加width:100%样式，让它填满父单元格 -->
        <table style="width:100%">
          <tr>
            <th>Workpackage Name</th>
            <th>Planned Value</th>
            <th>Actual Cost</th>
            <th>Earned Value</th>
          </tr>
          <tr th:each="wpDetail : ${evaWP}">
            <td class="accordion" th:text="${wpDetail.key}"></td>
            <td th:text="${wpDetail.value.getPlannedValue()}"></td>
            <td th:text="${wpDetail.value.getActualCost()}"></td>
            <td th:text="${wpDetail.value.getEarnedValue()}"></td>
          </tr>
        </table>
      </td>
    </tr>
  </th:block>
</table>

补充说明： #

如果你的父表格设置了固定列宽，可能还需要调整子表格的列宽分配，但大多数情况下，给子表格加上width:100%就能解决你当前遇到的问题了。

内容的提问来源于stack exchange，提问作者Manuel