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

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
– Azrael, Commented Sep 17, 2014 at 11:04
@Azrael a div can be a table-cell element by changing its display property to display: table-cell; — png
– png, Commented Jun 8, 2018 at 2:13

Alex Char · Accepted Answer · 2014-09-17 11:04:31Z

16

You can set max-width instead:

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

fiddle

answered Sep 17, 2014 at 11:04

Alex Char

33.3k9 gold badges51 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

snow Over a year ago

any way we can set the width in percentages?

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related