Result
5年前にjQueryでテーブル内で空の要素をハイライトさせる、という記事を書いたのを偶然確認したのでCSS版みたいなものを書いておきます。
特別なことはしてなくて、今は:emptyを使える時代になった、みたいな内容です。
セル毎に異なるスタイルや文字にしたい場合はclass付与等で対応してください
css
td:empty{/*tdが空なら背景をyellowに*/
background:yellow;
}
td:empty:before{/*背景が空なら文字挿入*/
content:"無し";
}
html
<table>
<tr>
<th>順番</th>
<th>名前</th>
<th>数</th>
<th>金額</th>
</tr>
<tr>
<td>1</td>
<td>りんご</td>
<td>10</td>
<td>2000円</td>
</tr>
<tr>
<td>2</td>
<td>ごりら</td>
<td>5</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>ラッパ</td>
<td></td>
<td>3万円</td>
</tr>
<tr>
<td>4</td>
<td></td>
<td>22</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>その他</td>
<td></td>
<td>5億円</td>
</tr>
</table>
can i use
ブラウザのサポート状況です
