How can I get the background of my sticky table th to not scroll away?

user_17854234 0
Viewed 27

I have this table that dynamically loads the table body rows. The wrapper uses Bootstrap5's overflow-scroll to allow for the table to stay one height and scroll if too many rows are generated. Now I made the table head sticky but in order to accommodate chromium I also had to apply it to each individual thead th

Now the issue is on chromium while the thead th text is sticky the background color is not, so it scrolls away! This works fine on 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>

bootstrap-5 css html
1 Answers

I closed several opening tags. See if that helps using the snippet below:

#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>

user_88015990
Related