Bug 18565 – table-layout:fixed computes wrong cell width ignoring border width

• Status: RESOLVED
• Resolution: DUPLICATE
• Component: Layout and Rendering

[Alan Tam]

If a table has both "table-layout: fixed" and "width: 0", then cells with borders have wrong width.
This occurs in both safari 3.x mac&win and linux svn 31841 (debian sid).
The expected behavior is rendered by IE6, IE7, Firefox 2, Firefox 3 beta and Opera 9.2.

Consider a table with 3 columns, all with width 200px.
If one of the cells have "border-left: 50px; width: 150px;",
then according to the rules of "table-layout: fixed", the cell should still have width 200px.
But webkit renders the cell with only width 150px.

[Alan Tam]

Created attachment 20658 [details]
reduction

reduction

[Marek Stepien]

I can confirm this in the following browsers:

Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_5_7; en-US) AppleWebKit/531.5 (KHTML, like Gecko) Chrome/3.0.194 Safari/531.5

Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_5_7; pl-pl) AppleWebKit/532.0+ (KHTML, like Gecko) Version/4.0.2 Safari/530.19

Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_5_7; pl-pl) AppleWebKit/530.19.2 (KHTML, like Gecko) Version/4.0.2 Safari/530.19

I am also pretty sure it was also reproducible in earlier WebKit builds, as I remember having to work around this on one of the sites I made.

[Marek Stepien]

Note that what comment 0 says about the width needing to be 0 is not actually needed -- any width other than the default value of auto triggers this problem.

You can change "width:0" to "width: 600px" in attachment 20658 [details] and still see the issue.

[Marek Stepien]

Created attachment 33114 [details]
How the testcase is rendered in WebKit, Gecko and Opera

From top: Firefox 3.5, Opera 10alpha, today's WebKit nightly.

[Marek Stepien]

Also, IE 7 and 8 render it exactly the same as Gecko and Opera.

[Tatham Oddie]

Suspected duplicate of bug 18565.

[Tatham Oddie]

Suspected duplicate of bug 13339.

[ryan beal]

I'm having a similar issue but with the padding.
table
{
 table-layout:fixed;
}
td
{
 width:70px;
 padding:0 4px;
}

Expected Results: cell with a 70px content box and a 78px padding box.
Browsers with expected results: IE 6, 7, 8. FF 2, 3. Opera 10.

Webkit browser (chrome, safari) Results: cell with a 62px content box and a 70px padding box.

Page with issue (this page should be live for awhile):
http://www.maxpreps.com/testing/reference_for_webkit_team_regarding_table_bug.htm

[Bryan Forbes]

This seems to be a border-box vs. content-box issue and WebKit is putting fixed layout cells into border-box mode. I have created a fiddle at http://jsfiddle.net/bryanforbes/uuwy5/ which demonstrates that even trying to force TD's into content-box mode with "-webkit-box-sizing: content-box;" fails.

[Marek Stepien]

This has been fixed by fixing bug 78412.

[Robert Hogan]

*** This bug has been marked as a duplicate of bug 78412 ***