css - display: table-cell and fixed width

Question

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?

@Guy I think you are the only one seeing actuall cells here.. since Levi is using div's — Azrael, Sep 17 '14 at 11:04
@Azrael a div can be a table-cell element by changing its display property to `display: table-cell;` — png, Jun 08 '18 at 02:13

score 16 · Accepted Answer · answered Sep 17 '14 at 11:04

16

You can set max-width instead:

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

fiddle

answered Sep 17 '14 at 11:04

Alex Char

32,879
9
49
70

any way we can set the width in percentages? – snow May 07 '20 at 17:11

css - display: table-cell and fixed width

1 Answers1

Linked