{"id":81,"date":"2005-07-13T22:11:45","date_gmt":"2005-07-13T22:11:45","guid":{"rendered":"http:\/\/lachy.id.au\/log\/2005\/07\/table-layout"},"modified":"2006-10-19T06:41:25","modified_gmt":"2006-10-19T06:41:25","slug":"table-layout","status":"publish","type":"post","link":"https:\/\/lachy.id.au\/log\/2005\/07\/table-layout","title":{"rendered":"table-layout"},"content":{"rendered":"<p>Not to be confused with layout tables, this little used, yet wonderful CSS\r\n\tproperty \u2018<code class=\"style\"><a href=\"http:\/\/www.w3.org\/TR\/CSS21\/tables.html#propdef-table-layout\">table-layout<\/a><\/code>\u2019 could have saved me a lot of time recently, had I thought\r\n\tof it. You see, the challenge I had was that I needed all columns of a table\r\n(containing tabular data) to be presented with equal width columns.<\/p>\r\n<p>My immediate thought was to use <code class=\"markup\">col<\/code> and specify widths in percentages. However,\r\n\tthe difficulty was that the number of columns varied from 3 to 5 so I couldn\u2019t\r\n\tjust specify one single percentage, since the percentage would vary from approximately\r\n\t33.3% for 3 columns to 20% for 5 columns.<\/p>\r\n<p>Being a little rushed and not actually stopping to think, I decided that my\r\n\tonly solution would be to specify a presentational <code class=\"markup\">class<\/code> for the table element\r\n\tthat indicated the number of columns, and then use that to select and style\r\n\tthe col elements with the appropriate width. It wasn\u2019t till a couple of days\r\n\tlater that the better solution presented itself, which is ironic since I\r\n\thave, for about a week beforehand, been going over the <a href=\"http:\/\/www.w3.org\/TR\/CSS21\/tables.html\">CSS\r\n\t2.1 tables module<\/a>\twith a fine tooth comb, writing <a href=\"http:\/\/www.lachy.id.au\/dev\/css\/tests\/css21\/\">test\r\n\tcases<\/a> for it and contributing them to\r\n\tthe CSS 2.1 test suite.<\/p>\r\n<p>The <a href=\"http:\/\/www.w3.org\/TR\/CSS21\/tables.html#fixed-table-layout\">fixed\r\n\t\ttable layout algorithm<\/a> (CSS 2.1, section 17.5.2.1) defines in step\r\n\t3:<\/p>\r\n<blockquote cite=\"http:\/\/www.w3.org\/TR\/CSS21\/tables.html#fixed-table-layout\">\r\n\t<p>Any remaining columns equally divide the remaining horizontal table space\r\n\t   (minus borders or cell spacing).<\/p><\/blockquote>\r\n<p>Which means, if I hadn\u2019t specified widths for any columns, nor any cell in\r\n\tthe first row (as described in the rest of the algorithm), all the columns would\r\n\tbe set to equal width. Oh, and by the way: Yes, this property is (<em>miraculously<\/em>)\r\n\tsupported by IE! Now that I know how this property works, I\u2019m sure I\u2019ll be making\r\n\ta lot more use of it.<\/p>","protected":false},"excerpt":{"rendered":"Not to be confused with layout tables, this little used, yet wonderful CSS property \u2018table-layout\u2019 could have saved me a lot of time recently, had I thought of it. You see, the challenge I had was that I needed all columns of a table (containing tabular data) to be presented with equal width columns. My &hellip; <a href=\"https:\/\/lachy.id.au\/log\/2005\/07\/table-layout\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">table-layout<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a>","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[],"_links":{"self":[{"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/posts\/81"}],"collection":[{"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/comments?post=81"}],"version-history":[{"count":0,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/posts\/81\/revisions"}],"wp:attachment":[{"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/media?parent=81"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/categories?post=81"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/tags?post=81"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}