Thymeleafテーブルはどのようにしてギャップを作りますか？

Question

以下のコードを使用すると、なぜ私のタイムリーフがこのような大きなギャップを作りますか？

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> 

結果

と、この下には、 "OK" の状態でプリントアウトし、すべての私のデータになります。私は最終的に価値に基づいてデータをソートしようとしています。私はjavascript/jqueryで作業しようとしましたが、複雑すぎます。値に基づいてデータ行を分割する方法を見つけました。値が「悪い」の場合は上記の表を上記の表に表示し、「OK」の値を表示する これは間違っていますか？ I

Answer 1

<tr>の代わりに<td>の要素にth:ifを入れているという問題があります。これは、HTMLを使用して、各非空の行の間にいくつかの空の行を持っている。このようなものを（に見えることを意味

が

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

あなただけそうのように、<tr>要素にth:ifを移動する必要があります。

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