Search code examples
htmlcssinline-styles

Inline CSS equivalent of td:empty


Is there any inline CSS equivalent for CSS selector:

table td:empty {
  visibility: hidden;
}

What should i write for this?

<table style="???">
  <tr>
    <td></td> <!-- to be filled later -->
    <td>foo</td>
  </tr>
</table>

Solution

  • Bardo's answer is correct in general: you can't specify selectors in an inline style attribute, because it only accepts style declarations which apply to the element having that attribute (inheritance notwithstanding). See my answer to this question for more details as well as a reference to the spec.

    In your very specific case of hiding empty cells, however, table elements actually happen to support an empty-cells property that may do what you're looking for:

    <table style="empty-cells: hide">
      <tr>
        <td></td> <!-- to be filled later -->
        <td>foo</td>
      </tr>
    </table>
    

    Note that the propdef says that it applies to table-cells and not table elements, however the property is inherited, so you can specify it on the table itself and have it apply to all its empty cells via inheritance.