我在尝试使用colgroup和col标签对我的一个宽 html 表的最后两列进行样式设置时遇到了一个奇怪的问题。
我在 2 个基于 chromium 的浏览器（google chrome 和 opera）上进行了测试，问题仍然存在。但在 Mozilla Firefox 上测试时，根本不存在问题。
经过大约一个小时的调试后，我设法解决了该问题，但我能够在原始 html 文档中重现该问题。可以在https://affectionate-lamport-fa8d14.netlify.app上查看完整内容，也可以在下面查看最小复制内容：
table, td, tr, th, {
white-space: nowrap;
font-size: inherit;
font-size: 25px;
}
th, td {
padding: 10px 22px;
border: 1px solid black;
}
body {
font-size: 25px;
}
table {
width: 100%;
}
.wrap {
overflow: auto;
display: flex;
flex-direction: column;
}
.bg-warning {
background-color: orange;
}
正如您所看到的，bg-warning类没有应用于最后一个表列（具有 2 个 colspan），问题仅在 chromium 浏览器中出现，如上所述。
当一个宽的tablewithwidth: 100%位于aflex-column和scroll autodiv内时，它的宽度受限于屏幕尺寸，即使渲染了整个表格并且在滚动时我们可以看到整个表格。
这个问题通常不明显，但如果我尝试将一些 css 样式/类应用到最后两列，如下所示：
<colgroup> <col span="20"> <col span="2" class="bg-warning"> </colgroup>
它们不会被应用，如果我将widthcss 属性table从100%fromfit-content更改为 ，我的样式就会应用。（这里是演示页面的 gif 解释：https://gifyu.com/image/luCZ）
不过，这个问题还有更多，只是为了完整性而将其添加到此处，主要问题如上所述，滚动上应用了一个奇怪的部分 CSS 样式，我无法在我的再现 HTML 演示中重新生成该样式。它也会消失，请参阅下面的 gif 来了解一些内容。这是 gif：https: //gifyu.com/image/luFZ
对于此行为是否有一个众所周知的解释，它确实看起来像一个错误，如果它是一个错误，请确认并指导我在哪里报告此错误，如果它实际上是一个错误而不是一个错误，我想自己报告此错误某种已知的怪癖。
注意：仅回答重新生成的示例就足够了。
相关分类