Synchronize column widths between HTML tables
-
I've got a dashboard containing tabular data, in a HTML table. This table is split in multiple parts interrupted by section headers.
The width of columns in the table is automatically adjusted by the browser, which I like. However, this means that with varying data, if the table is interrupted for a section header, the tables before and after the header can have different column widths.
Does anyone know a trick to make the tables have the same column widths, other than making them one table and putting the section header in a
colspan=14
tag?
-
@PleegWat You could sync the column widths with JS, but it's probably much easier to just
colspan="14"
your section headers. Though I'dcolspan="99"
instead; it won't make the table any wider, and if you add a new column, it'll already work with the new count.
-
@RaceProUK Well, I'd probably
'colspan="' . count( $columns ) . '"'
. JS seems like the wrong solution for this.Hm, I wonder if I can draw a border around an individual
<tbody>
.
-
@PleegWat you can only have one tbody IIRC
-
@ben_lubar You can have one head/foot, but multiple bodies. I've implemented table row grouping with that in the past.
-
@ben_lubar That's if you go by the spec, but since when has the HTML spec ever stopped anyone? ;)
-
Note that unlike the <thead>, <tfoot>, and <caption> elements however, multiple elements are permitted (if consecutive), allowing the data-rows in long tables to be divided into different sections, each separately formatted as needed.
-
@RaceProUK said in Synchronize column widths between HTML tables:
@ben_lubar That's if you go by the spec, but since when has the HTML spec ever stopped anyone?
? The spec allows multiple TBODY. The only limitation is they have to be consecutive. (Meaning: you can't have TBODY, THEAD, TBODY or anything weird like that.)
... EDIT: what PleegWat says
If I had $5 for every time RaceProUck was provably wrong, I'd have a lot of money.
-
TIL $20 is a lot of money