I have some divs
with display: table-cell
style and I would like to set fixed width on the divs
and to truncate the text inside if it doesn't fit.
HTML
<div class="row">
<div class="cell" style="width:100px;">Should not fit in 100px</div>
</div>
CSS
.row {
display: table-row;
}
.cell {
display: table-cell;
border: solid 1px #DADADA;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
FIDDLE DEMO
Is it possible?
Select your table. On the Layout tab, in the Cell Size group, click AutoFit. Click Fixed Column Width.
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.
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.
You can set max-width
instead:
<div class="cell" style="max-width:100px;">Should not fit in 100px</div>
fiddle
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