Here is the template data file:
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:
2 Answers
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;
}
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;
}
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.
