How come Thymeleaf tables creates a gap? - thymeleaf

Question

Why does my Thyme leaf creates such a big gap when I use the following code below.
BAD/WARNING
</h3>
<h3>
APPLICATION PROCESSING
</h3>
<table class="tablebad">
<tr>
<th> Status </th>
<th> HostName </th>
<th> Process Name </th>
<th> Process Count </th>
</tr>
<tr th:each="DartModel, iterStat : ${countlist}">
<td th:if ="${DartModel.Status == 'BAD'}" th:text="${DartModel.Status}"></td>
<td th:if="${DartModel.Status == 'BAD'}" th:text="${DartModel.host}"></td>
<td th:if="${DartModel.Status == 'BAD'}" th:text="${DartModel.processName}"></td>
<td th:if="${DartModel.Status == 'BAD'}" th:text="${DartModel.processCount}"></td>
</tr>
</table>
<h3>
APPLICATION PROCESSING
</h3>
<table class="tableok">
<thead>
<tr>
<th> Status </th>
<th> HostName </th>
<th> Process Name </th>
<th> Process Count </th>
</tr>
</thead>
<tbody>
<tr th:each="DartModel, iterStat : ${countlist}">
<td th:if="${DartModel.Status == 'OK'}" th:text ="${DartModel.Status}"></td>
<td th:if="${DartModel.Status == 'OK'}" th:text="${DartModel.host}"></td>
<td th:if="${DartModel.Status == 'OK'}" th:text="${DartModel.processName}"></td>
<td th:if="${DartModel.Status == 'OK'}" th:text="${DartModel.processCount}"></td>
</tr>
</tbody>
</table>
Result
and under this will be all my data printed out with the status of "OK". I am ultimately trying to sort the data based on value. I tried working with javascript/jquery but it was too complicated. I found a way to split the data rows based on values. If values is "BAD" display table above vice versa to values with "OK"
Am I doing this wrong? I

Answer 1

The problem is that your are putting the th:if on the <td> elements instead of the <tr>. This means that your html looks something like this (where you have several empty rows between each non-empty row.
<table>
<tr>
<td>BAD</td>
<td>...</td>
<td>...</td>
</tr>
<tr></tr>
<tr></tr>
<tr>
<td>BAD</td>
<td>...</td>
<td>...</td>
</tr>
<tr></tr>
</table>
You should just move the th:if to the <tr> element, like so:
<table class="tablebad">
<tr>
<th>Status</th>
<th>HostName</th>
<th>Process Name</th>
<th>Process Count</th>
</tr>
<tr th:each="DartModel, iterStat : ${countlist}" th:if="${DartModel.Status == 'BAD'}">
<td th:text="${DartModel.Status}" />
<td th:text="${DartModel.host}" />
<td th:text="${DartModel.processName}" />
<td th:text="${DartModel.processCount}" />
</tr>
</table>