This is rather unconventional, but this is a choice between re-writing pages of HTML or finding a way to do it in CSS. I would like a <th> to take up an entire row, forcing the one <td> which follows it to be on the next row (so a <th></th> <td></td> becomes a single column instead of two).
I have tried display: block, but that doesn't seem to cut it. What should I try?
I don't think this is possible, as rowspan and colspan have no CSS equivalent.
It can't be done using the :after pseudo-class, because you can't add markup that way, only node content. (right?)
The only idea that comes to mind, if the first column has a class name, you could try
th { display: none }
th.firstcolumn { display: table-cell }
and see what happens. I think, however, that this will not cause the th to spread over every column, just hide the others.
Oh and an extremely nasty idea, something along the lines of
th { display: none }
th.firstcolumn { position: absolute; display: block; left: 0px; right: 0px; }
but before you resort to that, you may want to rewrite your HTML.
As far as I know, there is no css property as of today that allows you to set table-cell properties such as colspan.
I would just do a search/replace in your IDE to replace <th> tags with <th colspan="2">
Should take mere seconds to do it.
Based on OP's edit:
I would try replacing every occurrence of </th> with </th></tr><tr>, that way you will get your desired effect of splitting the back to back as described.
You can do this with script, if you have ids on the header cells.
var header = document.getElementById("header_cell_id");
header.colSpan = "2";
I have been trying this with jQuery (which would be better) but it doesn't seem to work for some reason:
$("th").attr("colspan", "2");
Not possible — and, I’d venture, shouldn’t be possible. You should get your HTML right. It sounds like your <th> should have a scope attribute indicating which cells it’s a heading for.