我怎样才能让我的粘性表格的背景不滚动？答案

【问题标题】：How can I get the background of my sticky table th to not scroll away?我怎样才能让我的粘性表格的背景不滚动？
【发布时间】：2022-02-03 06:36:17
【问题描述】：

我有这个动态加载表格主体行的表格。包装器使用 Bootstrap5 的溢出滚动来允许表格保持一个高度并在生成太多行时滚动。现在我把表头做成粘性的，但为了适应铬，我还必须将它应用于每个人thead th

现在问题出在铬上，而 thead th 文本是粘性的，而背景颜色不是，所以它会滚动！这在 Firefox 上运行良好

#thead_presets{

    /* background: white; */
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1;
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);

}


.chrome_sticky{

    background: white;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1;
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);

}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="overflow-scroll" style="height:350px;width: 855px;"
  <table class="table" id="preset_table" style="text-align: center;" >
    <thead id="thead_presets">
      <tr class="chrome_sticky">
        <th class="chrome_sticky" scope="col">Name</th>
        <th class="chrome_sticky" scope="col">ISO</th>
        <th class="chrome_sticky" scope="col">AV</th>
        <th class="chrome_sticky" scope="col">TV</th>
        <th class="chrome_sticky" scope="col">Light 1</th>
        <th class="chrome_sticky" scope="col">Light 2</th>
        <th class="chrome_sticky" scope="col">Light 3</th>
        <th class="chrome_sticky" colspan="2" scope="col">Actions</th>
      </tr>
    </thead>
    <tbody id="preset_table_body">
    </tbody>
  </table>
</div>

【问题讨论】：

标签： html css bootstrap-5

【解决方案1】：

我关闭了几个开始标签。看看这是否有助于使用下面的 sn-p：

#thead_presets {
  /* background: white; */
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}

.chrome_sticky {
  background: white;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="overflow-scroll" style="height:350px;width: 855px;">
  <table class="table" id="preset_table" style="text-align: center;">
    <thead id="thead_presets">
      <tr class="chrome_sticky">
        <th class="chrome_sticky" scope="col">Name</th>
        <th class="chrome_sticky" scope="col">ISO</th>
        <th class="chrome_sticky" scope="col">AV</th>
        <th class="chrome_sticky" scope="col">TV</th>
        <th class="chrome_sticky" scope="col">Light 1</th>
        <th class="chrome_sticky" scope="col">Light 2</th>
        <th class="chrome_sticky" scope="col">Light 3</th>
        <th class="chrome_sticky" colspan="2" scope="col">Actions</th>
      </tr>
    </thead>
    <tbody id="preset_table_body">
    </tbody>
  </table>
</div>

【讨论】：

对不起，当我复制代码时，一些结束标签在粘贴中搞砸了，但这不是源代码中的问题，它是特定于浏览器的。