我想要一個總是100%寬度的表格，但我想讓列的寬度根據其內容而變化。也就是說，小列會縮小，以便為內容更多的列提供更多的空間。
下面是一個例子，我希望第1、3和4列縮小，以便第2列有更多空間。
https://codepen.io/melonfacedoom/pen/ZEyRywL
以下是該代碼的css：
.content-table {
border-collapse: collapse;
table-layout: fixed;
width:100%;
}
.content-table th,
.content-table td {
溢位：隱藏。
text-overflow: ellipsis;
uj5u.com熱心網友回復：
你必須洗掉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"> /span>
<thead>
<tr>/span>
<th>示例</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
</tr>/span>
</thead>/span>
<tbody>/span>
<tr>/span>
<td>例子</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
</tr>/span>
<tr>/span>
<td>例子</td>
<td> ExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee<。 /td>
<td>例子</td>
<td>Example</td>
</tr>/span>
<tr>/span>
<td>例子</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
</tr>/span>
<tr>/span>
<td>例子</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
</tr>/span>
<tr>/span>
<td>例子</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
</tr>/span>
</tbody>/span>
</table>/span>請確保添加word-break: break-all以斷開單詞，從而使其完美對齊。
同時考慮在你的th和td中添加min-width，以避免嚴重壓縮。
你修改后的codepen
由于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"> /span>
<thead>
<tr>/span>
<th>示例</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
</tr>/span>
</thead>/span>
<tbody>/span>
<tr>/span>
<td>例子</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
</tr>/span>
<tr>/span>
<td>例子</td>
<td> ExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee<。 /td>
<td>例子</td>
<td>Example</td>
</tr>/span>
<tr>/span>
<td>例子</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
</tr>/span>
<tr>/span>
<td>例子</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
</tr>/span>
<tr>/span>
<td>例子</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
</tr>/span>
</tbody>/span>
</table>/span>你所要做的就是為<td>元素添加最大寬度
uj5u.com熱心網友回復：
另一種可能性是保留你的text-overflow:ellipsis并避免table-layout:fixed;，那就是切換到一個grid布局。
這就是我的想法
。span class="hljs-selector-class">.content-table {
display: grid;
grid-template-columns: repeat（4, auto）。
}
thead,
tbody。
tfoot。
tr {/* 將它們從樹中移除，并使th/td的直接子表顯示為網格*/。
display: contents;
}
.content-table th,
.content-table td {
overflow: hidden;
text-overflow: ellipsis;
padding:2px;/* 使之更容易閱讀 */。
}
/*演示目的，顯示網格和單元格的位置 */ }
.content-table:hover {
box-shadow:0 0 0 1px;
差距。1px;
background: black;
}
.content-table:hover th,
.content-table:hover td{
background: white;
padding: 2px 1px 1px 2px;
}<table class="content-table"> /span>
<thead>
<tr>/span>
<th>示例</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
</tr>/span>
</thead>/span>
<tbody>/span>
<tr>/span>
<td>例子</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
</tr>/span>
<tr>/span>
<td>例子</td>
<td> ExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeExampleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee<。 /td>
<td>例子</td>
<td>Example</td>
</tr>/span>
<tr>/span>
<td>例子</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
</tr>/span>
<tr>/span>
<td>例子</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
</tr>/span>
<tr>/span>
<td>例子</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
</tr>/span>
</tbody>/span>
</table>/span>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/331816.html
標籤：