You can set column-width to auto or a length. Use auto if you are also using column-count or if you need to turn off the property. Think of it as a way of telling the browser to let column-count take the lead. To specify the width of the columns, use a length greater than (or equal to) 0.
By using CSS, the styling of HTML elements is easy to modify. To fix the width of td tag the nth-child CSS is used to set the property of specific columns(determined by the value of n) in each row of the table.
The following will solve your problem:
td.last {
width: 1px;
white-space: nowrap;
}
And a more flexible solution is creating a .fitwidth
class and applying that to any columns you want to ensure their contents are fit on one line:
td.fitwidth {
width: 1px;
white-space: nowrap;
}
And then in your HTML:
<tr>
<td class="fitwidth">ID</td>
<td>Description</td>
<td class="fitwidth">Status</td>
<td>Notes</td>
</tr>
If you want to make sure that last row does not wrap and thus size the way you want it, have a look at
td {
white-space: nowrap;
}
You could specify the width of all but the last table cells and add a table-layout:fixed and a width to the table.
You could set
table tr ul.actions {margin: 0; white-space:nowrap;}
(or set this for the last TD as Sander suggested instead).
This forces the inline-LIs not to break. Unfortunately this does not lead to a new width calculation in the containing UL (and this parent TD), and therefore does not autosize the last TD.
This means: if an inline element has no given width, a TD's width is always computed automatically first (if not specified). Then its inline content with this calculated width gets rendered and the white-space
-property is applied, stretching its content beyond the calculated boundaries.
So I guess it's not possible without having an element within the last TD with a specific width.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With