Table Columns, Setting Both Min and Max Width with CSS

Table columns, setting both min and max width with css

Tables work differently; sometimes counter-intuitively.

The solution is to use width on the table cells instead of max-width.

Although it may sound like in that case the cells won't shrink below the given width, they will actually.

with no restrictions on c, if you give the table a width of 70px, the widths of a, b and c will come out as 16, 42 and 12 pixels, respectively.

With a table width of 400 pixels, they behave like you say you expect in your grid above.

Only when you try to give the table too small a size (smaller than a.min+b.min+the content of C) will it fail: then the table itself will be wider than specified.

I made a snippet based on your fiddle, in which I removed all the borders and paddings and border-spacing, so you can measure the widths more accurately.

table {  width: 70px;}
table, tbody, tr, td {  margin: 0;  padding: 0;  border: 0;  border-spacing: 0;}
.a, .c {  background-color: red;}
.b {  background-color: #F77;}
.a {  min-width: 10px;  width: 20px;  max-width: 20px;}
.b {  min-width: 40px;  width: 45px;  max-width: 45px;}
.c {}

<table>  <tr>    <td class="a">A</td>    <td class="b">B</td>    <td class="c">C</td>  </tr></table>

How can I set max-width of table columns?

Add table-layout: fixed to table and width: 50px to th.

<!DOCTYPE html><html>
<head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1">  <style>    body {      margin: 0;      padding: 0;      font-family: Arial, sans-serif;      font-size: 16px;      line-height: 1.4;    }        .rg-container {      margin: 0 auto;      padding: 1em 0.5em;      color: #222;    }        caption {      margin-bottom: 1em;      text-align: left;    }        table {      width: 650px;      margin-bottom: 0.5em;      font-size: 1em;      border-collapse: collapse;      border-spacing: 0;      table-layout: fixed;    }        thead {      border-bottom: 3px solid #ddd;    }        tr {      border-bottom: 1px solid #ddd;      color: #222;    }        tbody tr:hover {      background-color: #dcf1f0 !important;    }        .zebra tr:nth-child(even) {      background-color: #f6f6f6;    }        th {      font-weight: bold;      padding: 0.35em;      font-size: 0.9em;      text-align: center;      width: 50px;    }        td {      padding: 0.35em;      font-size: 0.9em;      word-wrap: break-word;      text-align: right;    }        td:hover {      font-weight: bold;    }        td:nth-of-type(2),    td:nth-of-type(5),    td:nth-of-type(8),    td:nth-of-type(11) {      text-align: center    }  </style></head>
<body>  <div class="rg-container">    <table id="abc" class="rg-table zebra">      <caption>Alpha Beta Gamma</caption>      <thead>        <tr>          <th>Col 1</th>          <th>Col 2</th>          <th>Col 3</th>          <th>Col 4</th>          <th>Col 5</th>          <th>Col 6</th>          <th>Col 7</th>          <th>Col 8</th>          <th>Col 9</th>          <th>Col 10</th>          <th>Col 11</th>          <th>Col 12</th>          <th>Col 13</th>        </tr>      </thead>      <tbody>        <tr>          <td><b>27.04.20</b></td>          <td>XXX</td>          <td>08:00</td>          <td>09:15</td>          <td>XXX</td>          <td>09:30</td>          <td>12:00</td>          <td>XXX</td>          <td>13:00</td>          <td>15:00</td>          <td>XXX</td>          <td>15:15</td>          <td>18:00</td>        </tr>        <tr>          <td><b>28.04.20</b></td>          <td>XXX</td>          <td>08:00</td>          <td>09:15</td>          <td>XXX</td>          <td>09:30</td>          <td>12:00</td>          <td>XXX</td>          <td>13:00</td>          <td>15:00</td>          <td>XXX</td>          <td>15:15</td>          <td>18:00</td>        </tr>        <tr>          <td><b>29.04.20</b></td>          <td>XXX</td>          <td>08:00</td>          <td>09:15</td>          <td>XXX</td>          <td>09:30</td>          <td>12:00</td>          <td>XXX</td>          <td>13:00</td>          <td>15:00</td>          <td>XXX</td>          <td>15:15</td>          <td>18:00</td>        </tr>      </tbody>    </table>  </div>

Why does max-width behave like a minimum width in a table cell?

As others have noted, the behavior of max-width on table cells is not defined by the standard. That said, current* browsers all give the exact same counter-intuitive results, so there has to be a common algorithm to handle this case (at least for now).

^{* only the very newest version of MSIE/Edge (but what else is new...)}

Looking at it more closely, the mention of minimum widths is misleading; max-width actually does limit the maximum width. So why is the observed width of the column larger than the specified value?

Because it is applied before the specified table width is taken into account.

In a table with only one row and two cells, one of which has max-width, overflow:hidden and text-overflow:ellipsis set, the column widths are calculated first without any restrictions on the total width. After that, the cells are stretched to the specified table width, keeping their proportions from the first calculation step.

This test page shows the effect with and without table width restrictions, and for various text content lengths: http://output.jsbin.com/hebixu

To get a more predictable result in tables with a set width, the other cells can be given an explicit width. Then again, if the optimal widths are known beforehand, we can just use table-layout:fixed.

CSS - Multiple Columns with min-width & max-width

With jquery you could dynamically set the column widths as a % based on the number of columns within the row.

var colWidth = (1 / $('.sub.cf .row').children().length * 100) + '%';
$('.sub.cf .col').outerWidth(colWidth);

working fiddle. Insert or remove more columns and rerun it to see how it works.

CSS 'min-width' increasing width of table cells larger than value

CSS has no specification for how min-width and max-width are handled by tables, inline tables, table cells, etc. The behavior you are seeing is how Chrome somewhat arbitrarily handles it.

In CSS 2.1, the effect of 'min-width' and 'max-width' on tables, inline tables, table cells, table columns, and column groups is undefined.

CSS 2.1

This hasn't been changed in any later specs.

Table Columns, Setting Both Min and Max Width with CSS