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?

  • SockDev

    @PleegWat You could sync the column widths with JS, but it's probably much easier to just colspan="14" your section headers. Though I'd colspan="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.

  • SockDev

    @ben_lubar That's if you go by the spec, but since when has the HTML spec ever stopped anyone? 😉

  • @RaceProUK

    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.

  • SockDev

    TIL $20 is a lot of money

Log in to reply

Looks like your connection to What the Daily WTF? was lost, please wait while we try to reconnect.