带 Flex 的滚动自动 div 中的宽表,缺少一些 col 标签样式

我在尝试使用colgroupcol标签对我的一个宽 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-columnscroll autodiv内时,它的宽度受限于屏幕尺寸,即使渲染了整个表格并且在滚动时我们可以看到整个表格。

这个问题通常不明显,但如果我尝试将一些 css 样式/类应用到最后两列,如下所示:

<colgroup>
  <col span="20">
  <col span="2" class="bg-warning">
  </colgroup>

它们不会被应用,如果我将widthcss 属性table100%fromfit-content更改为 ,我的样式就会应用。(这里是演示页面的 gif 解释:https://gifyu.com/image/luCZ

不过,这个问题还有更多,只是为了完整性而将其添加到此处,主要问题如上所述,滚动上应用了一个奇怪的部分 CSS 样式,我无法在我的再现 HTML 演示中重新生成该样式。它也会消失,请参阅下面的 gif 来了解一些内容。这是 gif:https: //gifyu.com/image/luFZ

问题:

对于此行为是否有一个众所周知的解释,它确实看起来像一个错误,如果它是一个错误,请确认并指导我在哪里报告此错误,如果它实际上是一个错误而不是一个错误,我想自己报告此错误某种已知的怪癖。

注意:仅回答重新生成的示例就足够了。


料青山看我应如是
浏览 112回答 0
0回答
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

Html5