Table columns, setting both min and max width with css

css, html, html-table

Solution

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>

Problem

Original source

Related problems

• Prevent text from overlap table td width
• Min-width and max-height for table attributes