Faking Min Width on a Desk Column | CSS-Methods

The great ol’ <desk> tag is essentially the most semantic HTML for exhibiting tabular knowledge. However I discover it very onerous to manage how the desk is introduced, notably column widths in a dynamic surroundings the place you may not understand how a lot content material goes into every desk cell. In some instances, one column is tremendous broad whereas others are scrunched up. Different instances, we get equal widths, however on the expense of a column that incorporates extra content material and desires extra space.

However I discovered a CSS tricks-y workaround that helps make issues slightly simpler. That’s what I wish to present you on this publish.

The issue

First we have to perceive how structure is dealt with by the browser. We’ve got the table-layout property in CSS to outline how a desk ought to distribute the width for every desk column. It takes one among two values:

Allow us to begin with a desk with out defining any widths on its columns. In different phrases, we’ll let the browser resolve how a lot width to offer every column by making use of table-layout: auto on it in CSS. As you’ll discover, the browser does its greatest with the algorithm it has to divide the total accessible width between every column.

If we swap out an auto desk structure with table-layout: mounted, then the browser will merely divide the total accessible area by the full variety of columns, then apply that worth because the width for every column:

However what if we wish to management the widths of our columns? We’ve got the <colgroup> ingredient to assist! It consists of particular person <col> parts we will use to specify the precise width we’d like for every column. Let’s see how that works in with table-layout: auto:

I’ve inlined the kinds for the sake of illustration.

The browser isn’t respecting the inline widths since they exceed the quantity of obtainable desk area when added up. Consequently, the desk steals area from the columns in order that the entire columns are seen. That is completely positive default conduct.

How does <colgroup> work with table-layout: mounted. Let’s discover out:

This doesn’t look good in any respect. We’d like the column with a bunch of content material in it to flex a short while sustaining a set width for the remainder of the columns. A hard and fast table-layout worth respects the width — however a lot in order that it eats up the area of the column that wants essentially the most area… which is a no-go for us.

This might simply be solved if solely we may set a min-width on the column as an alternative of a width. That approach, the column would say, “I can provide all of you a few of my width till we attain this minimal worth.“ Then the desk would merely overflow its container and provides the consumer a horizontal scroll to show the remainder of the desk. However sadly, min-width on desk columns usually are not revered by the <col> ingredient.

The answer

The answer is to faux a min-width and we must be a bit artistic to do it.

We will add an empty <col> because the second column for our <colgroup> within the HTML and apply a colspan attribute on the primary column in order that the primary column takes up the area for each columns:

<desk>
  <colgroup>
    <col class="col-200" />
    <col />
    <col class="col-input" />
    <col class="col-date" />
    <col class="col-edit" />
  </colgroup>
  
  <thead>
    <tr>
      <th colspan="2">Venture identify</th>
      <th>Quantity</th>
      <th>Date</th>
      <th>Edit</th>
    </tr>
  </thead>
  
  <!-- and so on. -->
</desk>

Notice that I’ve added lessons instead of the inline kinds from the earlier instance. The identical thought nonetheless applies: we’re making use of widths to every column.

The trick is that relationship between the primary <col> and the empty second <col>. If we apply a width to the primary <col> (it’s 200px within the snippet above), then the second column can be eaten up when the mounted desk structure divides up the accessible area to distribute to the columns. However the width of the primary column (200px) is revered and stays in place.

Voilà! We’ve got a fake min-width set on a desk cell. The primary cell flexes because the accessible area modifications and the desk overflows for horizontal scrolling simply as we hoped it will.

(I added slightly sticky positioning to the primary column there.)

Accessibility

Let’s not completely overlook about accessibility right here. I ran the desk by NVDA on Home windows and VoiceOver on macOS and located that every one 5 columns are introduced, even when we’re solely utilizing 4 of them. And when the primary column is in focus, it broadcasts, “Column one by two”. Not completely elegant but additionally not going to trigger somebody to get misplaced. I think about we may throw an aria-hidden attribute on the unused column, but additionally know ARIA isn’t an alternative to poor HTML.

I’ll admit, this feels slightly, um, hacky. Nevertheless it does work! Let me know you probably have a unique strategy within the feedback… or know of any confusions this “hack” would possibly convey to our customers.