Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

css - display: table-cell and fixed width [duplicate]

Tags:

html

css

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?

like image 794
Levi Avatar asked Sep 17 '14 11:09

Levi


People also ask

How do you fix the width of a table cell?

Select your table. On the Layout tab, in the Cell Size group, click AutoFit. Click Fixed Column Width.

How do you set the fixed width of a TD table?

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.

Can every cell of table have different width?

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.


1 Answers

You can set max-width instead:

<div class="cell" style="max-width:100px;">Should not fit in 100px</div>

fiddle

like image 172
Alex Char Avatar answered Oct 07 '22 07:10

Alex Char