<h2>テーブルの空セルに色をつける</h2>
    <table>
        <tr>
            <th>名前</th>
            <th>年齢</th>
            <th>住所</th>
        </tr>
        <tr>
            <td>田中</td>
            <td>30</td>
            <td></td>  <!-- 空のセルなので背景色がつく -->
        </tr>
        <tr>
            <td>佐藤</td>
            <td></td>  <!-- 空のセルなので背景色がつく -->
            <td>東京</td>
        </tr>
        <tr>
            <td></td>  <!-- 空のセルなので背景色がつく -->
            <td>25</td>
            <td>大阪</td>
        </tr>
    </table>

<p><span></span><p>
  
table {
            width: 100%;
            border-collapse: collapse;
        }
th, td {
  border: 1px solid black;
  padding: 10px;
  text-align: center;
}
/* 空のセルに背景色をつける */
td:empty {
  background-color: lightgray;
}
p:empty{
  background-color: lightgray;
  height:20px;
}
p:not(:has(*)):empty {
    background-color: pink;
   height:20px;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.