Inline CSS equivalent of td:empty

Question

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>

Possible Dublicate of: http://stackoverflow.com/questions/5293280/css-pseudo-classes-with-inline-styles — j_s_stack, Jan 26 '15 at 07:45

score 3 · Answer 1 · answered Jan 26 '15 at 07:45

I don't think so, as what you put inside style tag is the styling code, not the selector... your elements would select by themselves, if you put inline styling code inside your HTML it's suposed that you know where are you putting it.

Otherwise you should use a CSS stylesheet and selectors.

score 3 · Accepted Answer · edited May 23 '17 at 11:53

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.

Wow... didn't know about that css attribute, quite intheresting. — Bardo, Jan 26 '15 at 17:30

Inline CSS equivalent of td:empty

2 Answers2