{"id":249476,"date":"2017-01-04T06:12:01","date_gmt":"2017-01-04T13:12:01","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=249476"},"modified":"2017-01-04T06:12:01","modified_gmt":"2017-01-04T13:12:01","slug":"table-layout","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/t\/table-layout\/","title":{"rendered":"table-layout"},"content":{"rendered":"<p>The <code>table-layout<\/code> property defines what algorithm the browser should use to lay out table rows, cells, and columns. <\/p>\n<p><!--more--><\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">table {\r\n  table-layout: fixed;\r\n}<\/code><\/pre>\n<p>As explained <a href=\"https:\/\/www.w3.org\/TR\/CSS21\/tables.html#width-layout\" rel=\"noopener\">in the CSS2.1 specification<\/a>, table layout in general is usually a matter of taste and will vary depending on design choices. Browsers will, however, automatically apply certain constraints that will define how tables are laid out. This happens when the <code>table-layout<\/code> property is set to <code>auto<\/code> (the default). But these constraints can be lifted when <code>table-layout<\/code> is set to <code>fixed<\/code>.<\/p>\n<h3>Values<\/h3>\n<ul>\n<li><code>auto<\/code>: the default. The browser&#8217;s automatic algorithm is used to define how a table&#8217;s rows, cells, and columns are laid out. The resulting table layout is generally dependent on the content of the table.<\/li>\n<li><code>fixed<\/code>: With this value, the table&#8217;s layout ignores the content and instead uses the table&#8217;s width, any specified width of columns, and border and cell spacing values. The column values used are based on widths defined on columns or cells for the first row of the table.<\/li>\n<li><code>inherit<\/code>: indicates that the value is inherited from the <code>table-layout<\/code> value of its parent<\/li>\n<\/ul>\n<p>In order for a value of <code>fixed<\/code> to have any effect, the table&#8217;s width has to be set to something other than <code>auto<\/code> (the default for the <code>width<\/code> property). In the demos below, all the table widths are set to 100%, which assumes we want the table to fill its parent container horizontally.<\/p>\n<p>The best way to see the the effects of a fixed table layout algorithm is using a demo.<\/p>\n<p data-height=\"467\" style=\"height: 467px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"MJgmpz\" data-default-tab=\"result\" data-user=\"impressivewebs\" data-embed-version=\"2\" data-pen-title=\"Demo for CSS's table-layout property\" class=\"codepen\">See the Pen <a href=\"http:\/\/codepen.io\/impressivewebs\/pen\/MJgmpz\/\" rel=\"noopener\">Demo for CSS&#8217;s table-layout property<\/a> by Louis Lazaris (<a href=\"http:\/\/codepen.io\/impressivewebs\" rel=\"noopener\">@impressivewebs<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<p>When you first view the above demo, you&#8217;ll notice the layout of the table columns is unbalanced and awkward. At that point, the table is using the browser&#8217;s default algorithm to define how to lay out the table, which means the content will dictate the layout. The demo exaggerates this fact by including a long string of text inside one table cell, while all the other table cells use just two words each. As you can see, the browser expands the first column to accommodate the larger bit of content.<\/p>\n<p>If you click the &#8220;Toggle table-layout: fixed&#8221; button, you&#8217;ll see what the table layout looks like when the &#8220;fixed&#8221; algorithm is used. When <code>table-layout: fixed<\/code> is applied, the content no longer dictates the layout, but instead, the browser uses any defined widths from the table&#8217;s first row to define column widths. If no widths are present on the first row, the column widths are divided equally across the table, regardless of content inside the cells.<\/p>\n<p>Further examples may help make this clearer. In the following demo, the table has a <code>&lt;colgroup&gt;<\/code> element whose first <code>&lt;col&gt;<\/code> element has a width of <code>400px<\/code>. Notice in this case, toggling <code>table-layout: fixed<\/code> has no effect.<\/p>\n<p data-height=\"473\" style=\"height: 473px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"BpBRPr\" data-default-tab=\"result\" data-user=\"impressivewebs\" data-embed-version=\"2\" data-pen-title=\"Demo for CSS's table-layout property\" class=\"codepen\">See the Pen <a href=\"http:\/\/codepen.io\/impressivewebs\/pen\/BpBRPr\/\" rel=\"noopener\">Demo for CSS&#8217;s table-layout property<\/a> by Louis Lazaris (<a href=\"http:\/\/codepen.io\/impressivewebs\" rel=\"noopener\">@impressivewebs<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<p>This happens because the default layout algorithm is essentially saying &#8220;make the first column 400px wide, and distribute the remaining columns based on their content&#8221;. Since the other three columns have the same content as each other, there will be no change. But now let&#8217;s add some extra text content to one of the other columns:<\/p>\n<p data-height=\"473\" style=\"height: 473px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"wgwdNX\" data-default-tab=\"result\" data-user=\"impressivewebs\" data-embed-version=\"2\" data-pen-title=\"Demo for CSS's table-layout property with col width and variable content\" class=\"codepen\">See the Pen <a href=\"http:\/\/codepen.io\/impressivewebs\/pen\/wgwdNX\/\" rel=\"noopener\">Demo for CSS&#8217;s table-layout property with col width and variable content<\/a> by Louis Lazaris (<a href=\"http:\/\/codepen.io\/impressivewebs\" rel=\"noopener\">@impressivewebs<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<p>Now if you click the toggle button, you&#8217;ll see the columns adjust to accommodate a fixed layout, irrespective of content. Once again, the same thing is happening; the first column is set at 400px then the remaining columns are divided equally. But this time, because one of the columns has extra content, the difference is noticeable.<\/p>\n<h3>How a fixed layout algorithm determines column widths<\/h3>\n<p>The following two demos should help in understanding that the first row of the table is what helps to define the column widths of a table set to <code>table-layout: fixed<\/code>.<\/p>\n<p data-height=\"473\" style=\"height: 473px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"VPZbNb\" data-default-tab=\"result\" data-user=\"impressivewebs\" data-embed-version=\"2\" data-pen-title=\"Demo for CSS's table-layout with cell in row 2 given defined width\" class=\"codepen\">See the Pen <a href=\"http:\/\/codepen.io\/impressivewebs\/pen\/VPZbNb\/\" rel=\"noopener\">Demo for CSS&#8217;s table-layout with cell in row 1 given defined width<\/a> by Louis Lazaris (<a href=\"http:\/\/codepen.io\/impressivewebs\" rel=\"noopener\">@impressivewebs<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<p>In the above demo, the first cell in the table&#8217;s first row has a width of 350px. Toggling <code>table-layout: fixed<\/code> adjusts the other columns, but the first one remains the same. Now try the following demo:<\/p>\n<p data-height=\"473\" style=\"height: 473px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"ygBbrW\" data-default-tab=\"result\" data-user=\"impressivewebs\" data-embed-version=\"2\" data-pen-title=\"Demo for CSS's table-layout with cell in row 2 given defined width\" class=\"codepen\">See the Pen <a href=\"http:\/\/codepen.io\/impressivewebs\/pen\/ygBbrW\/\" rel=\"noopener\">Demo for CSS&#8217;s table-layout with cell in row 2 given defined width<\/a> by Louis Lazaris (<a href=\"http:\/\/codepen.io\/impressivewebs\" rel=\"noopener\">@impressivewebs<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<p>In this case, it&#8217;s the second row that has a width attached to its first table cell. Now when the toggle button is clicked, all the column widths are adjusted. Again, this is because the fixed layout algorithm is using the first row to determine the column widths, and the end result is that it distributes the widths equally.<\/p>\n<h3>Benefits of a fixed layout algorithm<\/h3>\n<p>The aesthetic benefits of using <code>table-layout: fixed<\/code> should be clear from the demonstrations above. But the other major benefit is performance. The spec refers to the fixed algorithm as a &#8220;fast&#8221; algorithm, and for good reason. The browser does not need to analyze the entire table&#8217;s content before determining the size of the columns; it only needs to analyze the first row. So the result is a faster processing of the table&#8217;s layout.<\/p>\n<h3>Related Properties<\/h3>\n<ul>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/d\/display\/\"><code>display<\/code><\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/e\/empty-cells\/\"><code>empty-cells<\/code><\/a><\/li>\n<\/ul>\n<h3>More Information<\/h3>\n<ul>\n<li><a href=\"https:\/\/css-tricks.com\/fixing-tables-long-strings\/\">Fixed Table Layouts<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/TR\/CSS21\/tables.html#width-layout\" rel=\"noopener\">Fixed table layout<\/a> in CSS2.1 spec<\/li>\n<li><a href=\"https:\/\/drafts.csswg.org\/css-tables-3\/#table-layout-property\" rel=\"noopener\">The <code>table-layout<\/code> property<\/a> in CSS Table Module Level 3<\/li>\n<\/ul>\n<h3 id=\"browser-support\">Browser Support<\/h3>\n<table class=\"browser-support-table\">\n<thead>\n<tr>\n<th class=\"chrome\"><span>Chrome<\/span><\/th>\n<th class=\"safari\"><span>Safari<\/span><\/th>\n<th class=\"firefox\"><span>Firefox<\/span><\/th>\n<th class=\"opera\"><span>Opera<\/span><\/th>\n<th class=\"ie\"><span>IE<\/span><\/th>\n<th class=\"android\"><span>Android<\/span><\/th>\n<th class=\"iOS\"><span>iOS<\/span><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td data-browser-name=\"Chrome\" class=\"yep\">1+<\/td>\n<td data-browser-name=\"Safari\" class=\"yep\">1+<\/td>\n<td data-browser-name=\"Firefox\" class=\"yep\">1+<\/td>\n<td data-browser-name=\"Opera\" class=\"yep\">7+<\/td>\n<td data-browser-name=\"IE\" class=\"yep\">5+<\/td>\n<td data-browser-name=\"Android\" class=\"yep\">2.1+<\/td>\n<td data-browser-name=\"iOS\" class=\"yep\">3+<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"<p>The table-layout property defines what algorithm the browser should use to lay out table rows, cells, and columns.<\/p>\n","protected":false},"author":7178,"featured_media":0,"parent":13949,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[586,1004,651],"acf":[],"jetpack-related-posts":[{"id":367122,"url":"https:\/\/css-tricks.com\/almanac\/properties\/g\/grid-auto-flow\/","url_meta":{"origin":249476,"position":0},"title":"grid-auto-flow","date":"July 27, 2022","format":false,"excerpt":"The grid-auto-flow CSS property is part of the CSS Grid Layout specification that allows us to control the flow of grid items that are automatically placed when they are not explicitly positioned with any grid-placement properties. .grid-container { display: grid; grid-template-columns: repeat(8, 50px); grid-auto-flow: dense; } That example creates a\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":14130,"url":"https:\/\/css-tricks.com\/almanac\/properties\/v\/visibility\/","url_meta":{"origin":249476,"position":1},"title":"visibility","date":"September 6, 2011","format":false,"excerpt":"The\u00a0visibility\u00a0property in CSS has two different functions. It hides rows and columns of a table, and it also hides an element\u00a0without changing the layout. p { visibility: hidden; } tr { visibility: collapse; } visibility\u00a0has four valid values:\u00a0visible,\u00a0hidden,\u00a0collapse, and\u00a0inherit. We\u2019ll go through each of them to learn more. visible Just\u2026","rel":"","context":"In \"hiding\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":366362,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/break-before\/","url_meta":{"origin":249476,"position":2},"title":"break-before","date":"June 13, 2022","format":false,"excerpt":"The CSS break-before property is neat in that it allows, forces, or prevents breaks in paged media, multi-column layouts, and regions. When applying the property to an element, what we're doing is providing an instruction for whether to break or prevent breaks between pages, columns, and regions. Note: break-before is\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":366427,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/break-after\/","url_meta":{"origin":249476,"position":3},"title":"break-after","date":"June 13, 2022","format":false,"excerpt":"The CSS break-after property is neat in that it allows, forces, or prevents breaks in paged media, multi-column layouts, and regions. When applying the property to an element, what we're doing is providing an instruction for whether to break or prevent breaks between pages, columns, and regions. Note: break-after is\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":248452,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/caption-side\/","url_meta":{"origin":249476,"position":4},"title":"caption-side","date":"December 29, 2016","format":false,"excerpt":"The caption-side property in CSS allows you to define where to position HTML's <caption> element, used on HTML table headers. This property can also apply to any element whose display property is set to caption-side. table { caption-side: top; } Syntax caption-side: top | bottom | block-start | block-end |\u2026","rel":"","context":"In \"caption-side\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":365866,"url":"https:\/\/css-tricks.com\/almanac\/properties\/g\/grid-template-areas\/","url_meta":{"origin":249476,"position":5},"title":"grid-template-areas","date":"May 20, 2022","format":false,"excerpt":"The grid-template-areas CSS property allows you to define and name the cells (or \u201careas\u201d) in a CSS grid container. .grid-container { display: grid; grid-template-areas: \"header header\" \"sidebar main\"; } So, that example above? We get a two-by-two grid where the top row reserves two columns for an area named header.\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/249476"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/7178"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=249476"}],"version-history":[{"count":13,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/249476\/revisions"}],"predecessor-version":[{"id":249629,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/249476\/revisions\/249629"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13949"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=249476"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=249476"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}