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

ブラウザのサポート状況です