如何使用CSS突出显示非空表格单元格

Question

有没有办法用CSS突出显示非空（带字母数字值）表格单元？如果可能简单？谢谢。

Answer 1

下面的代码将突出显示所有单元格并隐藏空单元格，使其看起来没有突出显示。

table {
   empty-cells: hide;
}

th {
    background-color: #4CAF50;
    color: white;
}

td {
    background-color: #f9fcab;
}

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td></td> 
    <td>94</td>
  </tr>
</table>

Answer 2

您可以使用:not(:empty)选择器选择无空单元格。如果需要对空单元格应用不同的样式，请使用:empty选择器。

table {
  width: 100%;
}

table, th, td {
  border: 1px solid black;
}

th {
  background-color: yellow;
}

td:not(:empty) {
   background-color: aqua;
}

<table>
  <tr>
    <th>Header1</th>
    <th>Header2</th> 
    <th>Header3</th>
  </tr>
  <tr>
    <td>R1C1</td>
    <td></td> 
    <td>R1C3</td>
  </tr>
  <tr>
    <td></td>
    <td>R2C2</td> 
    <td>R2C3</td>
  </tr>
  <tr>
    <td>R3C1</td>
    <td>R3C2</td> 
    <td></td>
  </tr>
</table>

Answer 3

我展示了如何使用css和数字计数器。

这是链接：

  codes

http://jsfiddle.net/hxcwg1o4/