当我将宽度设置为自动时； 在chrome 80中，表格的宽度达到100%。 在 chrome 100+ 中，表格的宽度可以大于 100%。 我想知道导致这个问题的原因是什么以及如何解决。
<html>
<head></head>
<body>
<div style="overflow-x:auto">
<table style="width:auto">
<colgroup>
<col style="width: 3000px; min-width: 3000px;">
</colgroup>
<thead>
<tr>
<th style="background-color: red;color: black">
1
</th>
</tr>
</thead>
<tbody>
<tr>
<td style="background-color: red;color: black">
1
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>Chrome 100+ 中表格宽度之所以可以大于 100%，是因为 Chrome 处理 width: auto 属性的方式发生了变化。在以前版本的 Chrome 中，width: auto 属性会导致元素的大小适应其内容，最大可达其父容器的 100%。但是，在 Chrome 100+ 中， width: auto 属性现在将导致元素根据其内容调整大小，而不管其父容器的宽度如何。
<!DOCTYPE html>
<html>
<head>
<style>
.table-container {
overflow-x: auto;
}
table {
table-layout: fixed;
width: 100%;
}
th, td {
background-color: red;
color: black;
}
</style>
</head>
<body>
<div class="table-container">
<table>
<colgroup>
<col style="width: 300px;">
</colgroup>
<thead>
<tr>
<th>1</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>我在周围的 div 元素中添加了一个 table-container 类以进行样式设置。表格元素现在具有表格布局：固定；和宽度：100%；。这确保了表格的布局由您设置的宽度属性决定，并且它应该有助于在不同浏览器之间实现更一致的行为。