Table using div does not apply width or text ellipses

Question

I am trying to create a simple table which should truncate text with ellipses if it overflows the width.

However it seems the width is not being applied. Please see this in action:

Table width jsfiddle

Also copying the code here:

EDIT: added header and a div wrapper around all rows, which is not working with fixed layout

<div>
<div class="table">
<div class="row">
    <div class="cell">
        header
    </div>
    <div class="cell">
        123
    </div>
    <div class="cell">
        456
    </div>
    <div class="cell">
        789
    </div>
    <div class="cell">
        110
    </div>        
</div>
<div>
<div class="row">
    <div class="cell">
        This is a very long line of text that should be trimmed
    </div>
    <div class="cell">
        123
    </div>
    <div class="cell">
        456
    </div>
    <div class="cell">
        789
    </div>
    <div class="cell">
        110
    </div>        
</div>
<div class="row">
    <div class="cell">
        This is a very long line of text that should be trimmed
    </div>
    <div class="cell">
        123
    </div>
    <div class="cell">
        456
    </div>
    <div class="cell">
        789
    </div>
    <div class="cell">
        110
    </div>        
</div>
</div>
</div>
</div>

CSS

.table {
 display:table;
table-layout: fixed;
width: 100%
}

.row {
display: table-row
}

.cell {
display: table-cell;
width: 20%;
white-space: nowrap;
padding: 5px;
overflow: hidden;
text-overflow: ellipsis;
}

Please suggest. Thanks.

Answer 1

You need to add table-layout:fixed; and width:100%; to your table CSS:

.table {
    display:table;
    table-layout:fixed;
    width:100%;
}

jsFiddle example

.table {
    display:table;
    table-layout:fixed;
    width:100%;
}
.row {
    display: table-row;
}
.cell {
    display: table-cell;
    width: 20%;
    white-space: nowrap;
    padding: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
}

<div class="table">
    <div class="row">
        <div class="cell">This is a very long line of text that should be trimmed</div>
        <div class="cell">123</div>
        <div class="cell">456</div>
        <div class="cell">789</div>
        <div class="cell">110</div>
    </div>
    <div class="row">
        <div class="cell">This is a very long line of text that should be trimmed</div>
        <div class="cell">123</div>
        <div class="cell">456</div>
        <div class="cell">789</div>
        <div class="cell">110</div>
    </div>
</div>