Why colspan doesnt work - html

Question

I have a problem with my code specialy with the colspan part. Here is my code:
<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>
So my question is when I open the accordion class, the content (table) is showed in the first column of the other table and why not over all 4 columns? I think I'm doing something wrong with the . Here is a picture of the result [colspan]: http://thumbs.picr.de/32846430ew.jpg

Answer 1

I'm not familiar with thymeleaf, but I'm assuming it doesn't alter the table code you have here, it just styles it, or injects content.
So you have a table. It starts with a row with 4 th elements. Then you have a th element outside a row, which contains a row with 4 td elements. I believe maybe you meant to use a thead. But then you wouldn't need the tr elements within it. If I'm not mistaken, you're incorrectly nesting row-type elements and cell-type elements.
Also, the td element with the accordion class is empty. That might be
I can't offer much more without knowing thymeleaf, but your table output maybe should look something like this (it at least achieves the colspan working as intended):
<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>
That being said, that th I removed looks like it could be an each. If it is an iterator, then you may need to have it iterate in a different spot. If you can paste the actual HTML output of your code after the thymeleaf templating is applied, it would much easier for a wider audience to help you.