I need help creating a simple table that will truncate text with ellipses if it exceeds the width.
Despite my efforts, the width is not being applied correctly. You can see the issue here:
Check out this JSFiddle for the table width
Here is the code snippet:
Including a header and a div wrapper around all rows which doesn't work 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 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;
}
Your suggestions are appreciated. Thank you.