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

Question

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.

^{_{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).

Answer 1

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;
        }
    }).width(largest);
});

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.

Answer 2

Why can't you just set the inner tables to 100% width and let it be limited by the outer table? If it's not the case that your outer table will be limiting the inner tables, then your example isn't doing a very good job of specifying that.

The CSS "trick" you're looking for is:

table.inner { width: 100%; }