{"id":376307,"date":"2023-01-10T07:11:20","date_gmt":"2023-01-10T15:11:20","guid":{"rendered":"https:\/\/css-tricks.com\/?p=376307"},"modified":"2023-01-10T07:11:24","modified_gmt":"2023-01-10T15:11:24","slug":"faking-min-width-on-a-table-column","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/faking-min-width-on-a-table-column\/","title":{"rendered":"Faking Min Width on a Table Column"},"content":{"rendered":"\n<p>The good ol\u2019 <code>&lt;table&gt;<\/code> tag is the most semantic HTML for showing tabular data. But I find it very hard to control how the table is presented, particularly column widths in a dynamic environment where you might not know how much content is going into each table cell. In some cases, one column is super wide while others are scrunched up. Other times, we get equal widths, but at the expense of a column that contains more content and needs more space.<\/p>\n\n\n\n<p>But I found a CSS tricks-y workaround that helps make things a little easier. That\u2019s what I want to show you in this post.<\/p>\n\n\n\n<!--more-->\n\n\n<h3 class=\"wp-block-heading\" id=\"the-problem\">The problem<\/h3>\n\n\n<p>First we need to understand how layout is handled by the browser. We have the <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/t\/table-layout\/\"><code>table-layout<\/code><\/a> property in CSS to define how a table should distribute the width for each table column. It takes one of two values:<\/p>\n\n\n\n<ul>\n<li><code>auto<\/code> (default)<\/li>\n\n\n\n<li><code>fixed<\/code><\/li>\n<\/ul>\n\n\n\n<p>Let us start with a table without defining any widths on its columns. In other words, we will let the browser decide how much width to give each column by applying <code>table-layout: auto<\/code> on it in CSS. As you will notice, the browser does its best with the algorithm it has to divide the full available width between each column.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_KKqZgZE\" src=\"\/\/codepen.io\/anon\/embed\/KKqZgZE?height=350&amp;theme-id=1&amp;slug-hash=KKqZgZE&amp;default-tab=result\" height=\"350\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed KKqZgZE\" title=\"CodePen Embed KKqZgZE\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>If we swap out an auto table layout with <code>table-layout: fixed<\/code>, then the browser will merely divide the full available space by the total number of columns, then apply that value as the width for each column:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_xxrpEaE\" src=\"\/\/codepen.io\/anon\/embed\/xxrpEaE?height=450&amp;theme-id=1&amp;slug-hash=xxrpEaE&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed xxrpEaE\" title=\"CodePen Embed xxrpEaE\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>But what if we want to control the widths of our columns? We have the <code>&lt;colgroup&gt;<\/code> element to help! It consists of individual <code>&lt;col&gt;<\/code> elements we can use to specify the exact width we need for each column. Let\u2019s see how that works in with <code>table-layout: auto<\/code>:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_GREyNye\" src=\"\/\/codepen.io\/anon\/embed\/GREyNye?height=600&amp;theme-id=1&amp;slug-hash=GREyNye&amp;default-tab=result\" height=\"600\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed GREyNye\" title=\"CodePen Embed GREyNye\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"is-style-explanation\">I have inlined the styles for the sake of illustration.<\/p>\n\n\n\n<p>The browser is not respecting the inline widths since they exceed the amount of available table space when added up. As a result, the table steals space from the columns so that all of the columns are visible. This is perfectly fine default behavior.<\/p>\n\n\n\n<p>How does <code>&lt;colgroup&gt;<\/code> work with <code>table-layout: fixed<\/code>. Let\u2019s find out:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_MWorbLm\" src=\"\/\/codepen.io\/anon\/embed\/MWorbLm?height=450&amp;theme-id=1&amp;slug-hash=MWorbLm&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed MWorbLm\" title=\"CodePen Embed MWorbLm\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>This doesn\u2019t look good at all. We need the column with a bunch of content in it to flex a little while maintaining a fixed width for the rest of the columns. A fixed <code>table-layout<\/code> value respects the width \u2014 but so much so that it eats up the space of the column that needs the most space\u2026 which is a no-go for us.<\/p>\n\n\n\n<p>This could easily be solved if only we could set a <code>min-width<\/code> on the column instead of a <code>width<\/code>. That way, the column would say, \u201cI can give all of you some of my width until we reach this minimum value.\u201c Then the table would simply overflow its container and give the user a horizontal scroll to display the rest of the table. But unfortunately, <code>min-width<\/code> on table columns are not respected by the <code>&lt;col&gt;<\/code> element.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"the-solution\">The solution<\/h3>\n\n\n<p>The solution is to fake a <code>min-width<\/code> and we need to be a bit creative to do it.<\/p>\n\n\n\n<p>We can add an empty <code>&lt;col&gt;<\/code> as the second column for our <code>&lt;colgroup&gt;<\/code> in the HTML and apply a <code>colspan<\/code> attribute on the first column so that the first column takes up the space for both columns:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"4,12\"><code markup=\"tt\">\n&lt;table>\n  &lt;colgroup>\n    &lt;col class=\"col-200\" \/>\n    &lt;col \/>\n    &lt;col class=\"col-input\" \/>\n    &lt;col class=\"col-date\" \/>\n    &lt;col class=\"col-edit\" \/>\n  &lt;\/colgroup>\n  \n  &lt;thead>\n    &lt;tr>\n      &lt;th colspan=\"2\">Project name&lt;\/th>\n      &lt;th>Amount&lt;\/th>\n      &lt;th>Date&lt;\/th>\n      &lt;th>Edit&lt;\/th>\n    &lt;\/tr>\n  &lt;\/thead>\n  \n  &lt;!-- etc. -->\n&lt;\/table><\/code><\/pre>\n\n\n\n<p class=\"is-style-explanation\">Note that I have added classes in place of the inline styles from the previous example. The same idea still applies: we\u2019re applying widths to each column.<\/p>\n\n\n\n<p>The trick is that relationship between the first <code>&lt;col&gt;<\/code> and the empty second <code>&lt;col&gt;<\/code>. If we apply a width to the first <code>&lt;col&gt;<\/code> (it\u2019s <code>200px<\/code> in the snippet above), then the second column will be eaten up when the fixed table layout divides up the available space to distribute to the columns. But the width of the first column (<code>200px<\/code>) is respected and remains in place.<\/p>\n\n\n\n<p><em>Voil\u00e0!<\/em> We have a faux <code>min-width<\/code> set on a table cell. The first cell flexes as the available space changes and the table overflows for horizontal scrolling just as we hoped it would.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_BaZJyLr\" src=\"\/\/codepen.io\/anon\/embed\/BaZJyLr?height=450&amp;theme-id=1&amp;slug-hash=BaZJyLr&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed BaZJyLr\" title=\"CodePen Embed BaZJyLr\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>(I added a little <a href=\"https:\/\/css-tricks.com\/a-table-with-both-a-sticky-header-and-a-sticky-first-column\/\">sticky positioning<\/a> to the first column there.)<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"accessibility\">Accessibility<\/h2>\n\n\n<p>Let&#8217;s not totally forget about accessibility here. I ran the table through NVDA on Windows and VoiceOver on macOS and found that all five columns are announced, even if we&#8217;re only using four of them. And when the first column is in focus, it announces, &#8220;Column one through two&#8221;. Not perfectly elegant but also not going to cause someone to get lost. I imagine we could throw an <code>aria-hidden<\/code> attribute on the unused column, but also know ARIA isn&#8217;t a substitute for poor HTML.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>I\u2019ll admit, this feels a little, um, hacky. But it does work! Let me know if you have a different approach in the comments\u2026 or know of any confusions this \u201chack\u201d might bring to our users.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The good ol\u2019 &lt;table&gt; tag is the most semantic HTML for showing tabular data. But I find it very hard to control how the table is presented, particularly column widths in a dynamic environment where you might not know how much content is going into each table cell. In some cases, one column is super [&hellip;]<\/p>\n","protected":false},"author":288726,"featured_media":292600,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","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":"","jetpack_publicize_message":"Clever little trick from Anders Pederson to fake min-width on a table column.","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[1496,1004,651],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/07\/table-pattern.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":173860,"url":"https:\/\/css-tricks.com\/fixing-tables-long-strings\/","url_meta":{"origin":376307,"position":0},"title":"Fixed Table Layouts","date":"July 2, 2014","format":false,"excerpt":"There is a CSS property for tables that, it seems to me, is well-supported, little known, and super useful. It changes the way that tables are rendered such that it gives you a sturdier, more predictable layout. It is this: table { table-layout: fixed; } The default property for table-layout\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":239489,"url":"https:\/\/css-tricks.com\/accessible-simple-responsive-tables\/","url_meta":{"origin":376307,"position":1},"title":"Accessible, Simple, Responsive Tables","date":"March 22, 2016","format":false,"excerpt":"There is no single solution to make any appropriately responsive. That's what I like about this post by Davide Rizzo: it admits that, then gets on with some solutions. This is a great addition to territory we've been treading for a while. Content and Comparison tables There are many types\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":150162,"url":"https:\/\/css-tricks.com\/complete-guide-table-element\/","url_meta":{"origin":376307,"position":2},"title":"A Complete Guide to the Table Element","date":"September 19, 2013","format":false,"excerpt":"The <table> element in HTML is used for displaying tabular data. You can think of it as a way to describe and display data that would make sense in spreadsheet software. Essentially: columns and rows. In this article, we\u2019re going to look at how to use them, when to use\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2013\/09\/table-guide.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":15891,"url":"https:\/\/css-tricks.com\/responsive-data-table-roundup\/","url_meta":{"origin":376307,"position":3},"title":"Responsive Data Table Roundup","date":"January 11, 2012","format":false,"excerpt":"There has been a bunch of takes on responsive data tables since I first published about it. View Demo The idea of the original was to abandon the grid layout of the table and make each cell its own line. Each of those lines is labeled with a pseudo element.\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2012\/01\/zurb-responsive-tables.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":7692,"url":"https:\/\/css-tricks.com\/fluid-width-equal-height-columns\/","url_meta":{"origin":376307,"position":4},"title":"Fluid Width Equal Height\u00a0Columns","date":"October 18, 2010","format":false,"excerpt":"Equal height columns have been a need of web designers forever. If all the columns share the same background, equal height is irrelevant because you can set that background on a parent element. But if one or more columns need to have their own background, it becomes very important to\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2010\/10\/desire1.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":298375,"url":"https:\/\/css-tricks.com\/some-css-grid-strategies-for-matching-design-mockups\/","url_meta":{"origin":376307,"position":5},"title":"Some CSS Grid Strategies for Matching Design Mockups","date":"November 14, 2019","format":false,"excerpt":"The world of web development has always had a gap between the design-to-development handoff. Ambitious designers want the final result of their effort to look unique and beautiful (and true to their initial vision), whereas many developers find more value in an outcome that is consistent, dependable, and rock solid\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/11\/grid-lines.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\/posts\/376307"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/288726"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=376307"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/376307\/revisions"}],"predecessor-version":[{"id":376318,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/376307\/revisions\/376318"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/292600"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=376307"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=376307"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=376307"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}