Menu
Consider this simple HTML table:
<!doctype html>
<html>
<head>
<title>Test</title>
</head>
<body>
<table style="border-collapse: collapse; table-layout: fixed; width: 280px;">
<tr>
<td style="padding: 5px; width: 50px; border: 0; word-wrap: break-word;">a</td>
<td style="padding: 5px; width: 100px; border: 0; word-wrap: break-word;">b</td>
<td style="padding: 5px; width: 100px; border: 0; word-wrap: break-word;">c</td>
</tr>
</table>
</body>
</html>
This renders properly in every major browser, except in Chrome, in which the column widths bizarrely come out as 46px, 102px and 102px respectively.
If I take the CSS width declaration out of the table element, then it renders correctly in Chrome. But I need this in there, otherwise word-wrapping won't work correctly.
Any idea why this isn't working? I've tried different doctypes and this hasn't changed anything, so I'm assuming it's not an HTML5 table problem.
EDIT: It turns out that if you specify table-layout: fixed and a pixel width on the table element and pixel widths on each column, then Chrome will assume that your column widths include padding. This contravenes the W3C box model and is in violation of CSS2 required behaviour.
If you don't specify table-layout: fixed or you don't specify a pixel width on the table element, then Chrome will correctly assume your column widths that you specify exclude padding. All other browsers assume that your column widths exclude padding.
In the example above, specifying the widths as 60px, 110px and 110px would fix the problem in Chrome but then break it in every other browser. The values of 46px, 102px and 102px come from Chrome evenly distributing the columns with a ratio of 40:90:90 instead of 50:100:100.
277
HTML tables were originally intended to be used for presenting tabular data, not for layout. The World Wide Web Consortium (W3C®) discourages use of tables for layout because they are striving for a web in which content and structure are completely separate from presentation.
To manipulate the height or width of an entire table, place the size attribute (either "WIDTH=" or "HEIGHT=") within the <TABLE> code. To manipulate individual cells, place the size attribute within the code for that cell.
Tables for Layout Are Invalid in HTML 4.01 So, if you want to write valid HTML 4.01, you can't use tables for layout. You should only use tables for tabular data, and tabular data generally looks like something you might display in a spreadsheet or possibly a database.
If the data is tabular, use tables; if the content of the table is presentational, don't use tables.
I fixed this problem myself today using table-layout: fixed and box-sizing: border-box to force Chrome to stop taking padding into account. Otherwise you never know what sizing model Chrome will pick, even for two very similar tables.
86
Well, my math says Chrome's doing what it should:
102 + 102 + 46 = 250px -> Widths
2(5) + 2(5) +2(5) = 10 + 10 + 10 = 30px -> Padding
Widths + Padding = 250 + 30 = 280px, or the width you specified for the table.
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
