I want a table that is always 100% width, but I want the columns' widths to vary based on their content. i.e. small columns shrink to give more space to for columns with more content.
Here is an example where I would like columns 1, 3, and 4 to shrink so that column 2 has more space.
https://codepen.io/melonfacedoom/pen/ZEyRywL
Here's the css from that codepen:
.content-table {
border-collapse: collapse;
table-layout: fixed;
width:100%;
}
.content-table th,
.content-table td {
overflow: hidden;
text-overflow: ellipsis;
}
CodePudding user response：
You have to remove table-layout: fixed because it allocates equal width for all child elements. Try this.
body {max-width: 100%; overflow-x:hidden;}
.content-table {
border-collapse: collapse;
/*table-layout: fixed;*/
width:100%;
}
.content-table th,
.content-table td {
overflow: hidden;
word-break:break-all;
min-width: 7em;
text-align: left;
}<table class="content-table">
<thead>
<tr>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
</tr>
<tr>
<td>Example</td>
<td>ExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</td>
<td>Example</td>
<td>Example</td>
</tr>
<tr>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
</tr>
<tr>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
</tr>
<tr>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
</tr>
</tbody>
</table>Make sure to add word-break: break-all to break the word so that it will align perfectly.
Also consider adding min-width to your th and td to avoid heavy compression.
Your modified codepen
As the OP suggested that he wanted the contents in one line here's a fix for that.
body {max-width: 100%; overflow-x:hidden;}
.content-table {
border-collapse: collapse;
/*table-layout: fixed;*/
width:100%;
}
.content-table th,
.content-table td {
overflow: hidden;
word-break:break-all;
min-width: 7em;
text-align: left;
}
.content-table td {overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 35vw;}<table class="content-table">
<thead>
<tr>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
</tr>
<tr>
<td>Example</td>
<td>ExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</td>
<td>Example</td>
<td>Example</td>
</tr>
<tr>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
</tr>
<tr>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
</tr>
<tr>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
</tr>
</tbody>
</table>All you have to do is adding max-width for the <td> element
CodePudding user response：
Another possibility to keep your text-overflow:ellipsis and avoid table-layout:fixed; would be to switch to a grid layout.
here is the idea
.content-table {
display: grid;
grid-template-columns: repeat(4, auto);
}
thead,
tbody,
tfoot,
tr {/* remove them virtually from the tree and make th/td direct child of table displayed as a grid */
display: contents;
}
.content-table th,
.content-table td {
overflow: hidden;
text-overflow: ellipsis;
padding:2px;/* makes it a bit easier to read */
}
/* demo purpose , to show where grid and cells stand */
.content-table:hover {
box-shadow:0 0 0 1px;
gap: 1px;
background: black;
}
.content-table:hover th,
.content-table:hover td {
background: white;
padding: 2px 1px 1px 2px;
}<table class="content-table">
<thead>
<tr>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
</tr>
<tr>
<td>Example</td>
<td>ExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</td>
<td>Example</td>
<td>Example</td>
</tr>
<tr>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
</tr>
<tr>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
</tr>
<tr>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
</tr>
</tbody>
</table>