Adjust Nested Containers to Corresponding Sizes

Tables nested into tables. The nested tables are not related to each other, thus their column widths are different. Such layout does not look good. The JavaScript working in this page tries to fix that. Use your browser's "View Page Source" menu item to see its source code. You can also read in my Blog about this.

In the examples below, tables have a green border, header cells a blue, data cell a magenta. Tables of nesting level 0 are khaki, 1 yellow, 2 light-blue. Table cells that have a colspan defined (spanning several columns) are rendered orange.
As soon as you have clicked one of the "Adjust" buttons, any table cell will show its "category" (see definition below) on mouse-hover as a red label.

HTML TABLE with colspan cells

HTML DIV-table with CSS display: table; (does not support colspan)

Term Definition:

A "column category" is a marker that is equal for all cells that are directly below each other. A numbering like "1", "1.1", "1.2", ... "2.1.1", ... would do it. The number of dots represents the nesting level.

Strategy for Natural Width

• set column categories on both TD and TH, as element attributes
• calculate clientWidth maximum per category, from both TD and TH, but leave out elements with colspan
• calculate and size deepest level first, going upwards, last calculate and size top-level
  • size only elements that were used to estimate maximum width
  • when setting CSS width, subtract the local padding first
  • set all three of CSS width, min-width and max-width to same value
• finally stretch all nested TABLE elements to 100% width

Strategy for Full Width with One Elastic Column

• same as above, and after ...
  • fix all colspan-cells that are not in the elastic column to their current clientWidth, whereby colspan-cells overlapping the elastic column in any way count as elastic (e.g. "1" and "1.2" both overlap "1.2.1")
  • stretch all non-colspan cells overlapping the elastic column to 100% width, erasing their former max- and min-width
  • stretch the top-TABLE itself to 100% width

This script does NOT use a resize-listener.

This script currently can not provide more than one elastic column. I tried this out, but together with colspan cells the layout breaks completely.

Known Bug

After adjustment to natural size, mind cell 2.1 in first HTML TABLE, 3rd row from above (excluding header row), with content "XXXXXXXXXXXXXXXXXXXXXX". It is wider than its content, and there is no cell in this column that justifies that width. It had this width right from start because of the 3-colspan cell below it, which sized the table to be so wide that the cell above grew wider than needed.

The script does NOT fix this, because finding out the real "natural width" of a cell would require measuring the width of its innerHTML in a cell-independent context. This could be done by enclosing the content into a <div style="display: inline-block;">. But that might be slow, and break other functionality. Moreover such is a very rare case!

This bug does not occur in the DIV-table below, because DIV-tables do not support the colspan attribute. This also is the reason why the DIV-table has a little bit different column widths than the HTML TABLE.