Avoid scrollbars next to sticky part

Question

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)?

does this answer your question ?: https://stackoverflow.com/questions/21168521/table-fixed-header-and-scrollable-body#answer-22855568 — Zyfella, Feb 08 '23 at 09:13
Does this answer your question? [Table fixed header and scrollable body](https://stackoverflow.com/questions/21168521/table-fixed-header-and-scrollable-body) — Zyfella, Feb 08 '23 at 09:23

Avoid scrollbars next to sticky part

0 Answers0