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:
Change column width To change the width to a specific measurement, click a cell in the column that you want to resize. On the Layout tab, in the Cell Size group, click in the Table Column Width box, and then specify the options you want.
HTML tables can have different sizes for each column, row or the entire table. Use the style attribute with the width or height properties to specify the size of a table, row or column.
Table and column widths are set by the widths of table and col elements or by the width of the first row of cells. Cells in subsequent rows do not affect column widths.
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.
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.
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.
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/
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