如何使表元素水平溢出它的父容器？ 我想避免设置表格宽度，因为它应该是列的总和。
我试图设置列的宽度，但是一旦它们达到父级宽度，它们就不再增长了。
下面的代码段演示了两个列宽不同的表，但它们的呈现方式相同。 第二个表实际上应该溢出父表。
null
.container {
width: 300px;
background: #ccc;
overflow: auto;
}
table {
table-layout: fixed;
border-collapse: collapse;
margin-bottom: 10px
}
td,
th {
border: solid 1px red;
text-align: center
}
#table1 col {
width: 100px
}
#table2 col {
width: 200px
}<div class="container">
<table id="table1">
<colgroup>
<col /><col /><col />
</colgroup>
<thead>
<tr>
<th>A</th><th>B</th><th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
</tbody>
</table>
<table id="table2">
<colgroup>
<col /><col /><col />
</colgroup>
<thead>
<tr>
<th>A</th><th>B</th><th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
</tbody>
</table>
</div>null
CSS属性table-layout:fixed只有在设置表格宽度时才会真正应用。 也可以是宽度:100%。 另外，从父元素的类中删除overflow:auto，除非您想要水平滚动条。
.container {
width: 300px;
background: #ccc;
}
table {
table-layout: fixed;
border-collapse: collapse;
margin-bottom: 10px;
width: 100%;
}
只需将overflow设置为overflow-x属性，该属性将允许表的宽度溢出，然后设置表的width
null
.container {
width: 350px;
background: #ccc;
overflow-x: auto;
}
table {
table-layout: fixed;
border-collapse: collapse;
margin-bottom: 10px;
width: 100%;
}
td,
th {
border: solid 1px red;
text-align: center;
}
#table1 col {
width: 100px;
}
#table2 col {
width: 200px;
}<div class="container">
<table id="table1">
<colgroup>
<col />
<col />
<col />
</colgroup>
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
<table id="table2">
<colgroup>
<col />
<col />
<col />
</colgroup>
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>
您应该为表格添加宽度，尝试添加
width: max-content;
到表
table {
table-layout: fixed;
border-collapse: collapse;
margin-bottom: 10px;
width: max-content;
}
