Лучшая альтернатива, чем для отображения пустых ячеек таблицы HTML?

Question

Это классическая проблема - когда у вас пустая ячейка таблицы, браузер не отображает границы вокруг нее. Есть также два известных обходных пути. Один из них - поместить   в ячейку таблицы; другой - использовать свойство empty-cells:show CSS.

К сожалению, у обоих есть недостатки.   выглядит некрасиво, когда дело доходит до выделения текста и его вставки. Вы получаете много мест, где их не должно быть, возможно, даже с экзотическим персонажем Юникода. empty-cells:show должен решить именно эту проблему, но, к сожалению, он корректно работает только в IE, начиная с версии 8 (и только в режиме соответствия стандартам). Его можно заставить работать в других версиях, указав также border-collapse: collapse, но иногда это НЕ то, что нужно. В моем случае у меня довольно сложная таблица, и она опирается на border-collapse:separate и в противном случае создаст довольно грязный суп CSS / HTML.

Итак, что еще можно поместить в ячейку таблицы, чтобы IE рисовал границы, но не был видимым или копируемым? Для всех других браузеров empty-cells:show уже делает свое дело, поэтому мне просто нужно обмануть IE.

Answer 1

Вы также можете поместить невидимый элемент br:

<td><br style="visibility:hidden"></td>

Это нелепое количество ненужного кода, но оно делает свое дело - дополнительный текст еще не добавлен, пока не отображается ячейка.

Обратите внимание, что <br/> является недопустимым синтаксисом HTML в соответствии с официальными спецификациями http://www.w3.org/TR/html401/struct/text.html#edef-BR. Однако это допустимый синтаксис XHTML.

Answer 2

Вы можете показать ячейки с помощью этого кода CSS. Я успешно протестировал его в Safari и Firefox. Я думаю, это работает и в других браузерах.

table {
  width: 100%;
  border: 0;
  empty-cells: show;
}
td {
  border: 1px solid grey;
}
td:empty:after {
  content: '.';
  color: transparent;
  visibility: hidden;
}
/* alternate background */

tr:nth-child(odd) td {
  background: rgba(0, 0, 0, 0.2);
}
tr:nth-child(even) td {
  background: rgba(0, 0, 0, 0.1);
}

<table>
  <tr>
    <td>Row</td>
    <td>1</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>Row</td>
    <td>3</td>
  </tr>
</table>