Colspan > 1 width redistribution

This page is intended to be used as a wpt testharness test, and for examining what algorithms do. Hovering over cells will display information about the table.

Principles

Wide cell redistributes its different widths to the spanned cells: percentage, min and max.

Creating understandable tests with percentage cells is complex because the relationship between percentage cell width, and table width is complex. Rules that govern relationship between table grid width and percentage cell width are:

  1. Rule#1, Single column sets minimum table width. Minimum table width is column.min_width / column.percent * 100.
  2. Rule#2, All percentage columns set minimum table width.
    Let P% be sum of all percentages, and Mpx sum of minimum widths of all non-percentage columns. The equations below determine minimum table width:
  3. FF and Edge interpret rule#2 as maximum table width, while Chrome interprets it as minimum table width.

    Table backgrounds will change if they match the 2 rules above: Rule#1, Rule#2, and both Rule#1 and Rule#2.

All examples have border-spacing:8, td.padding:0.

Percentage redistribution

Percentage CSS constrained span cells

Rules

10) auto/300px wide cell, 25%/50px span min width
wide min width gets distributed evenly (-border_spacing) to both cells at 146px
Table width: 146/0.25 + 4*8 = 584 + 32 = 616

25%/30px
25%/30px
x
300px min

11) auto/400px wide cell, 20%/50px, 60%/50px spans.
400 - 8px min width gets redistributed to span cells as 98px/294px.
98px/0.2 => min grid width 490 + 4*8 = 522.

Edge disagrees, table is 870

20%/50px
60%/50px
x
400px min

12) auto/400px wide cell, 50%/150px, 30%/150px spans.
This tests conflict resolution where min-width > redistributed width, and all browsers disagree.
min-width of the 2nd cell is larger than redistributed width, causing differences.
400-8px distributed max width tries to redistribute as 245|147, but gets constrained to 245|150 in Chrome.
table width from cell 1 245/0.5 + 4*8 = 522
table width from cell 2 150/0.3 + 4*8 = 532
cell 1 = 50% of 500 = 250, cell 2 = 30% of 500 = 150 , cell 3 gets the remaining 100

Chrome/FF/Edge end up with tables of different widths: 532/590/685. Chrome's 2nd span cell seems 'most correct' at its original max width of 150. In FF, extra min-width seems to cause more width to be redistributed. If you hover over 30%/150 cell, its min width will change to 100px, and all browsers will agree.

50%/150px
30%/150px
x
400px min

13) auto/400px wide cell, 50%/75px/125px, 30%/75px/125px spans.
400-8px min width gets redistributed as 245/147 (no min width limits)

Edge is different

50%/75
/125
30%/75
/125
x
300px min