dreftymac dreftymac - 1 year ago 75
CSS Question

How to get multiple separate HTML tables to all be the same width as the widest table

Problem: I have HTML markup to deal with that consists of multiple tables nested inside another table. I would like the "inner tables" to all be the same width. I would also like all of the "inner tables" to be no wider than the width of the widest "inner table" in its natural state.

I do not want to simply set the width of all the tables to some fixed percentage, as I do not know in advance what the width of the widest "inner table" should be until the HTML page is actually generated.

Here is a visual example

Source: https://en.wikipedia.org/wiki/File:Erasene-screen001.png

I want all tables to be the same width as inner-table-zero. Currently, none of the tables have an assigned width, and that's the way I like it, because I want all inner tables to naturally choose the width of whichever table is widest by default.

Question: Is there any CSS or JQuery or Javascript trick anyone knows that will obtain this desired styling?

Update: I'm about to delete this question because people seem to want to downvote me for not having a good reason for not wanting 100%. I do have a good reason ... I also do not know until runtime which table will be the "outermost" table (this is a recursively-generated structure of potentially unlimited depth). The trouble of adequately explaining this may just not be worth it.

Answer Source

I do not know of any HTML/CSS tricks to get it done, but since you are open to jQuery...

Assuming all your inner tables have a class of 'inner', you could do something like this:

$(document).ready(function() {
    var largest = 0;
    $('table.inner').each(function() {
        var width = $(this)[0].offsetWidth;
        if(width > largest) {
            largest = width;

EDIT: updated my answer to use offsetWidth instead of jQuery's width(), as the latter does not include border, padding, or margins in it. Tested it on IE7, FF, Safari, Opera, and it gives the desired effect.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download