TD and box sizing

TD defaults to box-sizing: content-box. How does box-sizing affect final TD size?

  1. Auto table layout
    1. Percent cells ignore box-sizing, it is always border-box.
    2. Fixed cells respect box-sizing.
  2. Fixed table layout
    1. Percent cells respect box sizing when computing cell width from assignable width.
    2. Percent cells ignore box sizing when computing grid max from cell width.

Table-layout: auto

TD width:%

content-box, C0:50%/100 C1:Auto Percent gets resolved to compute grid max size. C0 max_width is max_width + 2 padding = 100 + 2*20 = 140 Table width is 1/50%*140 + 3*padding = 280+30 = 310

50%/100
 Auto

border-box, C0:50%/100 C1:Auto Same test as above, but box-sizing is border-box.

50%/100
 Auto

content-box, C0:80%/100 C1:Auto Percent gets resolved to compute final cell size from assignable width. C0 border box width is 500 * 80%

80%/100
 Auto

border-box, C0:80%/100 C1:Auto Same as above, but border-box

80%/100
 Auto

TD width:fixed

content-box, C0:100/Auto C1:100/Auto Tests whether box-sizing affects how percentages are computed. C0 max_width is max_width + 2 padding = 100 + 2*20 = 140 Table width is 1/50%*140 + 3*padding = 280+30 = 310

100 100

border-box, C0:100/Auto C1:100/Auto Same test as above, but box-sizing is border-box.

100 100

TD height: fixed

content-box, C0 height:100px

100 height

border-box, C0 height:100px

100 height

Table-layout: fixed

TD width:%

content-box, C0:50%/100 C1:Auto Percent gets resolved to compute grid max size. C0 max_width is max_width + 2 padding = 100 + 2*20 = 140 Table width is 1/50%*140 + 3*padding = 280+30 = 310

50%/100
 Auto

border-box, C0:50%/100 C1:Auto Same test as above, but box-sizing is border-box.

50%/100
 Auto

content-box, C0:60%/100 C1:Auto Percent gets resolved to compute final cell size from assignable width. Assignable width is 530 - 3*10 = 500 C0 content box width is 500 * 60% + 40px padding = 340 C1 is 500 - 340 = 160

Legacy/Edge treat %ge TD as border box, and end up with 300px

60%/100
 Auto

border-box, C0:60%/100 C1:Auto Same as above, but border-box

80%/100
 Auto

TD width:fixed

content-box, C0:100/Auto C1:100/Auto Tests whether box-sizing affects how percentages are computed. C0 max_width is max_width + 2 padding = 100 + 2*20 = 140 Table width is 1/50%*140 + 3*padding = 280+30 = 310

100 100

border-box, C0:100/Auto C1:100/Auto Same test as above, but box-sizing is border-box.

100 100