テーブルのセルが空だった場合にハイライトしたり文字を挿入したり | かちびと.net

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