How to make a table column be a minimum width

Question

Here is the template data file: https://github.com/Hoektronics/BotQueue/blob/master/views/bot/dashboard_list.ejs

I'm trying to make 8 of the 10 columns of a table to only take up exactly the minimum width that they need to, based on the text, respecting the padding and column headers.

In the example image, I want all but the 4th and 9th columns to take up the minimum width. Technically, there are 9 column headers, and the last one has a colspan of 2. The last header is a span3. I'd like the percentage column to take up the least width that is needed, and let the progress bar or the pass/view/fail buttons take up the rest.

Column 4 is set up to replace overflowed text with an ellipsis.

Example image:

Haletky

Answer 1

There is a trick that involves setting some cells to a very small width, and then applying a white-space: nowrap property:

<table>
    <tr>
        <td class="min">id</td>
        <td class="min">tiny</td>
        <td>Fills space</td>
        <td>Fills space</td>
        <td class="min">123</td>
        <td class="min">small</td>
        <td>Fills space, wider</td>
        <td>Fills space</td>
        <td class="min">thin</td>
    </tr>
</table>

td {
    width: auto;
}

td.min {
    width: 1%;
    white-space: nowrap;
}

Live demo

As you can also see in the above fiddle, nowrap forces the table cell to prevent any line-breaks, and thus align its width to the smallest possible.

NOTE: If you have a thead, you want to apply the td's stylings to th as well.

---

UPDATE #1: Ellipsis (...)

To automatically collapse a longer column into ellipses, the text-overflow: ellipsis is what you are likely looking for:

td.cell-collapse {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

Live demo

This also requires overflow set to hidden, as well as a width or max-width with a fixed value. Add the cell-collapse class to cells whose width you would like to limit.

---

UPDATE #2: Handling Bootstrap

Bootstrap's table class sets width: 100%; which will mess up this approach. You can fix that with table { width: inherit !important; }

Live demo

NOTE: The tables in this approach already have full width because table cells already have width: auto;.

---

Previous Javascript-base solution removed, since the pure CSS-based approach now works consistently across all modern browsers. The original code is still available at the linked JSfiddle, commented out.

Fellmonger

Addendum: the previous width calculation solution returned 'auto' width for the text, I have updated the answer to reflect changes. – Fellmonger

In case anyone comes across this and is trying to make EVERY column min width, this doesn't work. It relies on at least one column to not have the 'min' class. – Billingsley

no-wrap ! You are great. It's a genius solution. – Covert

Answer 2

For Bootstrap 4, you can use class text-nowrap instead of rolling your own CSS.

<td class="text-nowrap">

Demp

Answer 3

If you know the sizes you want your column and they are fixed, I suggest using a fixed table layout. It allows you to specify the fixed % each column takes.

Here's a link that helped me in a similar situation http://css-tricks.com/fixing-tables-long-strings/

Goulet

I updated the template file I used, because I forgot to push the current version so you could see it. It is set up as a fixed table layout, but I don't know if that's correct. I don't know what the widths of the columns are going to be, since the text contents might change. – Haletky