CSS表格，宽度100%，列宽度随内容变化

Question

我想要一个始终100%宽度的表，但我希望列的宽度根据其内容而变化。也就是说，小的列会缩小，为内容较多的列提供更多的空间。

下面是一个示例，我想要缩小列1,3和4，以便列2有更多的空间。

https://codepen.io/melonfacedoom/pen/ZEyRywL

这是来自codepen的css:

.content-table {
border-collapse: collapse;
table-layout: fixed;
width:100%;
}
.content-table th,
.content-table td {
overflow: hidden;
text-overflow: ellipsis;
}

Answer 1

您必须删除table-layout: fixed，因为它为所有子元素分配相同的宽度。试试这个。

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>

确保添加word-break: break-all来分隔单词，使其完美对齐。还可以考虑在th和td中添加min-width，以避免过度压缩。

修改后的codependency

正如OP建议的那样，他希望内容在一行中，这里有一个修复。

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>

你所要做的就是为<td>元素添加max-width

Answer 2

另一种保留text-overflow:ellipsis而避免table-layout:fixed;的可能性是切换到grid布局。

是这样的

.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>

Answer 3

我找到了一个简单的解决办法。

像这样创建一个不可见的(height=0)第一行

<tr> <td colspan="9" style="width:100%vw; height:0px"></td></tr>

它使TABLE成为viewport的全宽度，剩下的行按照你想要的方式分布。