CODEWITHSUNDEEP
thymeleaf
JayC
JayC

Reputation: 2282

How come Thymeleaf tables creates a gap?

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 Output

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

Upvotes: 0

Views: 113

Answers (1)

Metroids
Metroids

Reputation: 20477

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>

Upvotes: 1

Related Questions