Стиль границы строки или столбца, а не ячейки

Question

У меня есть таблица, которую по другим причинам я предпочитаю хранить в таблице: развалиться. Тем не менее, я хотел бы иметь возможность выделить отдельные строки или столбца. К сожалению, кажется, что любой стиль, примененный к тегам <tr> или <col>, применяется только к ячейкам, а не к пространству между ними. Например:

<style>
  td { width: 10px; height: 10px; }
</style>
<table style="background-color: purple">
  <colgroup>
    <col span="2">
    <col style="background-color: red;">
    <col span="2">
  <colgroup>
  <tr><td><td><td><td><td></tr>
  <tr><td><td><td><td><td></tr>
  <tr style="background-color: orange;"><td><td><td><td><td></tr>
  <tr><td><td><td><td><td></tr>
  <tr><td><td><td><td><td></tr>
</table>

приводит к фиолетовой таблице с 5 вертикальными ячейками и 5 горизонтальными ячейками, заполненными цветом, но не всей строкой или столбцом.

Есть ли у меня какой-либо вариант, кроме использования border-collapse: collapse, чтобы заполнить это пространство между ячейками в данной строке или столбце?

Answer 1

Не с border-collapse: separate, спецификации W3C точно определяют это:

Обратите внимание, что если таблица имеет свойство border-collapse: Отдельный, фон области, заданной свойством border-spacing, всегда является фоном элемента таблицы См. модель разделенных границ .

И

В [интервале границы] фон строки, столбца, группы строк и группы столбцов невидим, что позволяет фону таблицы просвечивать. Строки, столбцы, группы строк и группы столбцов не могут иметь границ (то есть пользовательские агенты должны игнорировать свойства границ для этих элементов).

Возможно, вы захотите проверить совместимость браузера в таблице CSS:

• Свойства таблицы CSS
• Свойства CSS столбца таблицы

Answer 2

Если вы используете постоянную ширину строки, вы можете использовать colspan, чтобы объединить все ячейки некоторой строки в одну отдельную ячейку, а затем создать в ней новую таблицу с отдельными границами с выбранным цветом фона.

Answer 3

table-collapse: separate с сотовым пространством вроде как отстой по этой причине. Возможно, вам лучше свернуть границы и вручную заполнить отдельные ячейки в CSS.