Подтвердить что ты не робот

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

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

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

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

4b9b3361

Ответ 1

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

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

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

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

Ответ 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>