CSS - Можно ли заставить <th>занять целый ряд?

Question

Это довольно необычно, но это выбор между переписыванием страниц HTML или поиском способа сделать это в CSS. Я хотел бы, чтобы <th> занимал всю строку, заставляя одну <td>, которая следует за ней, находиться в следующей строке (поэтому <th></th> <td></td> становится одним столбцом вместо двух).

Я пробовал display: block, но это не похоже на его сокращение. Что мне попробовать?

Answer 1

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

Я бы просто сделал поиск / замену в вашей IDE, чтобы заменить <th> теги на <th colspan="2">

Это займет всего несколько секунд.

На основании редактирования ОП:

Я бы попытался заменить каждое вхождение </th> на </th></tr><tr>, чтобы вы получили желаемый эффект разделения спины к спине, как описано.

Answer 2

Я не думаю, что это возможно, поскольку rowspan и colspan не имеют эквивалента CSS.

Это невозможно сделать с помощью псевдокласса :after, потому что вы не можете добавлять разметку таким образом, только содержимое узла. (Правильно?)

Единственная идея, которая приходит на ум, если в первом столбце есть имя класса, вы можете попробовать

th { display: none }
th.firstcolumn { display: table-cell }

и посмотри, что получится. Я думаю, однако, что это не заставит th распространяться на каждый столбец, просто скрыть остальные.

Да, и крайне противная идея, что-то вроде

th { display: none }
th.firstcolumn { position: absolute; display: block; left: 0px; right: 0px; }

но прежде чем вы прибегнете к этому, вы можете переписать свой HTML.

Answer 3

Невозможно - и, рискну, не должно быть. Вы должны правильно понять свой HTML. Похоже, ваш <th> должен иметь атрибут scope, указывающий, к каким ячейкам он относится.

Answer 4

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

var header = document.getElementById("header_cell_id");
header.colSpan = "2";

Я пробовал это с jQuery (что было бы лучше), но, похоже, по какой-то причине это не работает:

$("th").attr("colspan", "2");