Adjacent content: url() table elements result in incorrect table layout

Question

I have a 3-column x 2-row table layout. Each row has two elements populated by content:url()

In the first row, they are separated by an empty element and layout correctly

In the second row, they are adjacent. Both Chrome and Safari place the second element under the first.

Can anyone explain this behaviour and suggest a simple fix?

table td {
  height: 25px;
  width: 25px;
  border-width: 1px;
  border-style: solid;
  border-color: grey;
}
td.X {
  content: url('http://files.softicons.com/download/game-icons/super-mario-icons-by-sandro-pereira/png/64/Luma%20-%20Red.png');
}
td.Y {
  content: url('http://files.softicons.com/download/game-icons/super-mario-icons-by-sandro-pereira/png/32/Mushroom%20-%20Mini.png');
}

<table>
  <tbody>
    <tr>
      <td class="X">X</td>
      <td></td>
      <td class="Y">Y</td>
    </tr>
    <tr>
      <td class="X">X</td>
      <td class="Y">Y</td>
      <td></td>
    </tr>
  </tbody>
</table>

score 2 · Accepted Answer · answered Feb 06 '16 at 10:06

Table-cell boxes don't support changing their content with the content property. Whatever you're seeing in Chrome and Safari is non-standard behavior.

You probably meant to insert the generated content as ::before or ::after pseudo-elements within the cells instead.

Adjacent content: url() table elements result in incorrect table layout

1 Answers1