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:

score 116 · Accepted Answer · edited May 05 '18 at 06:42

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.

Addendum: the previous width calculation solution returned 'auto' width for the text, I have updated the answer to reflect changes. — John Weisz, Nov 18 '14 at 21:15
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. — Borophyll, Jan 28 '19 at 21:01

score 2 · Answer 2 · answered Oct 20 '22 at 12:09

2

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

<td class="text-nowrap">

answered Oct 20 '22 at 12:09

Jess

23,901
21
124
145

score 1 · Answer 3 · answered Nov 17 '14 at 22:43

1

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/

answered Nov 17 '14 at 22:43

Vall3y

1,181
8
18

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. – jnesselr Nov 17 '14 at 22:46

How to make a table column be a minimum width

3 Answers3

UPDATE #1: Ellipsis (...)

UPDATE #2: Handling Bootstrap

Linked