Thymeleafのテーブルで特定の条件の場合に行の背景色を変更したい

Question

前提・実現したいこと

Thymeleafでテーブルを表示した際に特定の条件の場合に行の背景色を変更したいです。

試したこと

IDと名前を表示する簡単なテーブルですが、${list}ではid(String),kana(String),eFlg(String)の3つの要素を持っています。
このeFlgの値によって行の色を変更したいと思いth:ifで条件を分けてみたのですが

<tbody>
	<tr th:each="list : ${list}" th:if="${list.eFlg =='0'}" style= "background-color: #00ff00;">
		<td th:text="${list.id}"></td>
		<td th:text="${list.kana}"></td>
	</tr>
</tbody>

まず、これだとeFlgが0の場合は期待通り背景色が緑になりましたが、eFlgが1の場合、表示自体がされなくなってしまいます。

次に

<tbody>
	<tr th:each="list : ${list}" th:if="${list.eFlg =='0'}" style= "background-color: #00ff00;">
		<td th:text="${list.id}"></td>
		<td th:text="${list.kana}"></td>
	</tr>
	<tr th:each="list : ${list}" th:if="${list.eFlg =='1'}">
		<td th:text="${list.id}"></td>
		<td th:text="${list.kana}"></td>
	</tr>
</tbody>

としてみたところ、今回は行が消えることなくすべて表示はされたのですが、
緑の行が先にすべて表示され、白色の行は緑の後にまとめて表示されてしまいました。

緑と白をこのように分けてしまうのではなく混合して処理をするにはどういった記述にすればよいでしょうか？

Answer 1

th:styleappend を使います。

例：

th:styleappend="${employee.department == '営業部'}? 'background-color: #f99;'

なお、cssのクラスを追加する場合は、th:classappend です。

th:if はお調べのとおり、if文の内容がfalseになると、以降の子要素を出力しなくなります。

Comments

[moshi]

＞A-pZさん
ご回答ありがとうございます。
th:styleappendとth:classappend の使い方、勉強になりました。

Answer 2

CSSのクラス作ってclassappendのほうが良いように思います。

tr.bg-green{
  background-color: #00ff00;
}

    <tr th:each="list : ${list}" th:classappend="${list.eFlg =='1'} ? 'bg-green'">

インラインスタイルはあまり望ましくないのでクラスにしました。

Comments

[moshi]

＞m.ts10806さん
ご回答ありがとうございます。
記載の通りインラインにするよりCSSを使用したほうがよさそうですね！

[m.ts10806]

むしろインラインのデメリットの方が大きいでしょうね。
HTML,CSSもきちんとおさえるようにしてください。

Answer 3

thymeleafを触ってみる(備忘録として)

こちらの記事は参考になりませんか？現在の記述方法ですと、eFlgがfalseの物は表示されませんが、

<p th:text="${---条件式---}? 'A' : 'B'"/>

この書き方に則ればできるのではないでしょうか？

Comments

[moshi]

＞yuu_infoさん
ご回答ありがとうございます。
"${---条件式---}? 'A' : 'B'"という書き方ができるの知りませんでした。ありがとうございます！