Issue
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;
}
Solution
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
Answered By – Viira
This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0