Html 为什么colspan不起作用

我的代码有问题，特别是colspan部分。这是我的密码：

    <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">
              <table>               
                <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>

相位名称
计划价值
实际成本
挣值
工作包名称
计划价值
实际成本
挣值

---

所以我的问题是，当我打开手风琴课时，内容（表格）显示在另一个表格的第一列，为什么不在所有的4列上？我想我的电脑有问题。下面是结果的图片[colspan]：

我不熟悉thymeleaf，但我假设它不会改变这里的表代码，它只是对其进行样式设置或注入内容

因此您有一个

表

。它以包含4个

th

元素的行开始。然后在一行之外有一个th元素，它包含一个包含4个

td

元素的行。我相信你可能是想用

thead

。但是这样您就不需要它里面的

tr

元素了。如果我没有弄错的话，您将行类型元素和单元格类型元素嵌套错误

另外，accordio类的

td

元素为空。那可能是

在不了解thymeleaf的情况下，我无法提供更多内容，但是您的表输出可能应该是这样的（它至少实现了colspan的预期工作）：

相位名称
计划价值
实际成本
挣值
工作包名称
计划价值
实际成本
挣值

---

也就是说，我删除的

th

看起来可能是一个each。如果它是一个迭代器，那么您可能需要让它在不同的位置进行迭代。如果您可以在应用thymeleaf模板后粘贴代码的实际HTML输出，更广泛的受众将更容易帮助您。

也许，如果我们看到生成的HTML，可能更容易说出来？描述不够清楚，您到底想实现什么？你能在JSFIDLE上发布一个实例吗？可以对表格单元格使用静态内容。另外，我假设有一个javascript，你没有包括它来控制你提到的手风琴，这可能会影响手风琴。难道…不应该在…里面吗？我上传了一张图片，但它很小。是的，有一个javascript正在运行，这很好！问题是，加载的表只显示在表的第一列，而不是全部4列。为什么，当人们要求html时，你会上传缩略图吗？

    <table>
      <thead>
        <th>Phasen Name</th>
        <th>Planned Value</th>
        <th>Actual Cost</th>
        <th>Earned Value</th>
      </thead>
      <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>
        <td colspan="4">
          <table>
            <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>
    </table>