Avoid scrollbars next to sticky part

104 Views Asked by At

When using position: sticky to get a sticky header in tables the scrollbar still does cover the part that is sticky.

.container {
  display: table;
}

.header-row {
  display: table-header-group;
  position: sticky;
  top: 0;
}

.body-row {
  display: table-row;
}

.body, .header {
  display: table-cell;
  padding: 5px;
  border: 1px solid black;
  min-width: 100px;
}

.header {
  background-color: greenYellow;
}
<div class="container">
  <div class="header-row">
    <div class="header">Header</div>
    <div class="header">Header</div>
    <div class="header">Sticky header should not have scrollbar on its right side</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
  <div class="body-row">
    <div class="body">Content</div>
    <div class="body">Content</div>
    <div class="body">Content</div>
  </div>
</div>

Is it possible to have it positioned only for the scrollable part (body table, none for header/footer)?

0

There are 0 best solutions below