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
ブラウザのサポート状況です
