{"action":"created","issue":{"url":"https://api.github.com/repos/w3c/csswg-drafts/issues/121","repository_url":"https://api.github.com/repos/w3c/csswg-drafts","labels_url":"https://api.github.com/repos/w3c/csswg-drafts/issues/121/labels{/name}","comments_url":"https://api.github.com/repos/w3c/csswg-drafts/issues/121/comments","events_url":"https://api.github.com/repos/w3c/csswg-drafts/issues/121/events","html_url":"https://github.com/w3c/csswg-drafts/issues/121","id":155374094,"number":121,"title":"[css-tables] How does table-layout:fixed even work?","user":{"login":"FremyCompany","id":364405,"avatar_url":"https://avatars.githubusercontent.com/u/364405?v=3","gravatar_id":"","url":"https://api.github.com/users/FremyCompany","html_url":"https://github.com/FremyCompany","followers_url":"https://api.github.com/users/FremyCompany/followers","following_url":"https://api.github.com/users/FremyCompany/following{/other_user}","gists_url":"https://api.github.com/users/FremyCompany/gists{/gist_id}","starred_url":"https://api.github.com/users/FremyCompany/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/FremyCompany/subscriptions","organizations_url":"https://api.github.com/users/FremyCompany/orgs","repos_url":"https://api.github.com/users/FremyCompany/repos","events_url":"https://api.github.com/users/FremyCompany/events{/privacy}","received_events_url":"https://api.github.com/users/FremyCompany/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/w3c/csswg-drafts/labels/css-tables-3","name":"css-tables-3","color":"0e8a16"}],"state":"open","locked":false,"assignee":{"login":"FremyCompany","id":364405,"avatar_url":"https://avatars.githubusercontent.com/u/364405?v=3","gravatar_id":"","url":"https://api.github.com/users/FremyCompany","html_url":"https://github.com/FremyCompany","followers_url":"https://api.github.com/users/FremyCompany/followers","following_url":"https://api.github.com/users/FremyCompany/following{/other_user}","gists_url":"https://api.github.com/users/FremyCompany/gists{/gist_id}","starred_url":"https://api.github.com/users/FremyCompany/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/FremyCompany/subscriptions","organizations_url":"https://api.github.com/users/FremyCompany/orgs","repos_url":"https://api.github.com/users/FremyCompany/repos","events_url":"https://api.github.com/users/FremyCompany/events{/privacy}","received_events_url":"https://api.github.com/users/FremyCompany/received_events","type":"User","site_admin":false},"milestone":null,"comments":5,"created_at":"2016-05-17T22:08:55Z","updated_at":"2016-05-25T00:20:38Z","closed_at":null,"body":"Hi there. I am not sure I understand how fixed table-layout works in some edge cases (and given the docs I can find online I am not the only one). \r\n\r\n**TLDR**: The ask is for browser vendors to have a look at how ```table-layout:fixed``` works in their browser. Particular attention is needed for these cases: ```width:auto```; ```width:min-content```; ```width:max-content```; ```float:left```; ```position:absolute```; when the sum of column widths overflow the table width; when some columns do not have a ```<td>``` or ```<th>``` in the first row, but are required by later ```<tr>...<td>```; I am interested in all behavior involving ```table-layout:fixed``` at this point.\r\n\r\n### So, lets start by one definition that clearly does not match implementation:\r\n\r\nAccording to MSDN:\r\n> You can optimize table rendering performance by specifying the table-layout property. This property causes the table to be rendered one row at a time, providing users with information at a faster pace. \r\n>\r\n> The table-layout property determines column widths for a table in the following order: \r\n> - By using information in the width property for the col or colGroup element. \r\n> - By using information in the width property for the td elements in the first row. \r\n> - By dividing the table columns equally, regardless of the size of the content. \r\n>\r\n> **If no width is specified for the table, it renders by default with width=100%.**\r\n>\r\n> If the content of a cell exceeds the fixed width of the column, the content is wrapped or, if wrapping is not possible, it is clipped. If the table-layout property is set to fixed, the overflow property can be used to handle content that exceeds the width of a td element. If the row height is specified, wrapped text is clipped when it exceeds the set height.\r\n> > Setting the property to fixed significantly improves table rendering speed, particularly for longer tables. Setting row height further improves rendering speed, again enabling the parser to begin rendering the row without examining the content of each cell in the row to determine row height.\r\n\r\nThen how do we explain this test case:\r\n- https://jsfiddle.net/9m8ccz2h/\r\n- https://jsfiddle.net/9m8ccz2h/1/\r\n\r\nI think the reason is that no browser apply the 10.3.3 algorithm when the width of the table is auto, and therefore use normal layout (initially I thought Firefox also did an exception if the width of the cells of the first row is explicit (example /3/ here), but it looks like to be a difference in the general sizing algorithm instead).\r\n- https://jsfiddle.net/9m8ccz2h/2/\r\n- https://jsfiddle.net/9m8ccz2h/3/\r\n\r\n### Closer definitions\r\n\r\nAccording to MDN:\r\n> Table and column widths are set by the widths of table and col elements or by the width of the first row of cells. Cells in subsequent rows do not affect column widths.\r\n> \r\n> Under the \"fixed\" layout method, the entire table can be rendered once the first table row has been downloaded and analyzed. This can speed up rendering time over the \"automatic\" layout method, but subsequent cell content may not fit in the column widths provided. Any cell that has content that overflows uses the overflow property to determine whether to clip the overflow content.\r\n\r\nAccording to CSS 2.1:\r\n> With this (fast) algorithm, the horizontal layout of the table does not depend on the contents of the cells; it only depends on the table's width, the width of the columns, and borders or cell spacing. \r\n> The table's width may be specified explicitly with the 'width' property. A value of 'auto' (for both 'display: table' and 'display: inline-table') means use the automatic table layout algorithm. However, if the table is a block-level table ('display: table') in normal flow, **a UA may (but does not have to) use the algorithm of 10.3.3 to compute a width and apply fixed table layout even if the specified width is 'auto'**. \r\n> \r\n> In the fixed table layout algorithm, the width of each column is determined as follows: \r\n> - A column element with a value other than 'auto' for the 'width' property sets the width for that column. \r\n> - Otherwise, a cell in the first row with a value other than 'auto' for the 'width' property determines the width for that column. If the cell spans more than one column, the width is divided over the columns. \r\n> - Any remaining columns equally divide the remaining horizontal table space (minus borders or cell spacing). \r\n> - The width of the table is then the greater of the value of the 'width' property for the table element and the sum of the column widths (plus cell spacing or borders). If the table is wider than the columns, the extra space should be distributed over the columns. \r\n> \r\n> If a subsequent row has more columns than the greater of the number determined by the table-column elements and the number determined by the first row, then additional columns may not be rendered. CSS 2.2 does not define the width of the columns and the table if they are rendered. When using 'table-layout: fixed', authors should not omit columns from the first row. \r\n> In this manner, the user agent can begin to lay out the table once the entire first row has been received. Cells in subsequent rows do not affect column widths. Any cell that has content that overflows uses the 'overflow' property to determine whether to clip the overflow content. \r\n\r\n### Remaining questions\r\n\r\nNow, what to do when the width of the table depends on the content is another question. Firefox ignores the fixed algorithm as if the width was auto for max-content, set width:0 for min-content. Chrome set width:0 for both cases (Edge does not support those):\r\n- https://jsfiddle.net/9m8ccz2h/4/ (might require adding prefix)\r\n- https://jsfiddle.net/9m8ccz2h/5/ (might require adding prefix)\r\n\r\nThe final bit that was left undefined was how other columns that are not in the first row are rendered.\r\nIt looks like they are with width set to 0 in all browsers: \r\n- https://jsfiddle.net/whbkd7fz/\r\n- https://jsfiddle.net/whbkd7fz/1/\r\n\r\n### Call for action\r\n\r\nI'm going to check whether all the previous assumptions holds true in EdgeHTML, but I would like other browser vendors to chime in in this case to assert there is no other special case where they apply the fixed algorithm anyway. Nobody seemed to apply it when floated or absolutely positioned (should behave like width:min-content), though in the latter case browsers didn't agree on the 100% table width. \r\n\r\nCc: @dbaron + @tabatkins ?"},"comment":{"url":"https://api.github.com/repos/w3c/csswg-drafts/issues/comments/221440101","html_url":"https://github.com/w3c/csswg-drafts/issues/121#issuecomment-221440101","issue_url":"https://api.github.com/repos/w3c/csswg-drafts/issues/121","id":221440101,"user":{"login":"FremyCompany","id":364405,"avatar_url":"https://avatars.githubusercontent.com/u/364405?v=3","gravatar_id":"","url":"https://api.github.com/users/FremyCompany","html_url":"https://github.com/FremyCompany","followers_url":"https://api.github.com/users/FremyCompany/followers","following_url":"https://api.github.com/users/FremyCompany/following{/other_user}","gists_url":"https://api.github.com/users/FremyCompany/gists{/gist_id}","starred_url":"https://api.github.com/users/FremyCompany/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/FremyCompany/subscriptions","organizations_url":"https://api.github.com/users/FremyCompany/orgs","repos_url":"https://api.github.com/users/FremyCompany/repos","events_url":"https://api.github.com/users/FremyCompany/events{/privacy}","received_events_url":"https://api.github.com/users/FremyCompany/received_events","type":"User","site_admin":false},"created_at":"2016-05-25T00:20:38Z","updated_at":"2016-05-25T00:20:38Z","body":"I thought by default \"float:left\" used min-content sizing, that's why"}}
{"actor":{"display_login":"FremyCompany"}}