Это классическая проблема - когда у вас есть пустая ячейка таблицы, браузер не создает границы вокруг нее. Существует также два известных метода обхода. Один заключается в размещении в ячейке таблицы; другой должен использовать свойство empty-cells:show CSS.
К сожалению, у обоих есть свои недостатки. является отвратительным, когда дело доходит до выбора текста и копирования его. Вы получаете много мест, где их не должно быть, возможно, даже с экзотическим символом Юникода. empty-cells:show должен решить именно эту проблему, но, к сожалению, он работает только в IE, начиная с версии 8 (а затем только в стандартном режиме). Его можно заставить работать в других версиях, указав border-collapse: collapse, но иногда это то, что НЕОБХОДИМО. В моем случае у меня довольно сложная таблица, и она полагается на border-collapse:separate и в противном случае создала бы довольно грязный суп CSS/HTML.
Итак, что же другие вещи, которые вы могли бы поместить в ячейку таблицы, которые сделают IE, нарисовать границы, но не быть видимыми или скопированными? Для всех других браузеров empty-cells:show уже выполняет трюк, поэтому мне просто нужно обмануть IE.
Вы также можете поместить невидимый элемент br:
<td><br style="visibility:hidden"></td>
Это смехотворное количество ненужного кода, но он делает трюк - дополнительный текст не добавляется, пока не отображается ячейка.
Обратите внимание, что <br/> является недопустимым синтаксисом HTML в соответствии с официальными спецификациями http://www.w3.org/TR/html401/struct/text.html#edef-BR. Это действительный синтаксис XHTML.
Вы можете показать ячейки с помощью этого кода 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>