1

I'm using a React table library called react-bootstrap-table2, and added the following CSS to make the top row sticky:

.table-container {
  overflow-y: auto;
  max-height: 500px;
}
.react-bootstrap-table th {
  position: sticky;
  top: -1px;
  background-color: #fff;
}

The sticky header is working, but when I start scrolling, the header outline goes away. Any way to prevent this?

Code Sandbox

Before Scrolling: Before

After Scrolling: After

Ravi
  • 3,718
  • 7
  • 39
  • 57

2 Answers2

2

The problem is that your has the table has

table {
 border-collapse: collapse;
}

Which means that the borders are collapsed. I do not know the exact reason, why it is initially visible but disappears on the scroll.

If you want to retain your border on a scroll, try doing this

table {
 border-collapse: separate;
}

but this breaks the UI of the table, as it adds gaps between cells

My solution is to add a border using multiple box shadows

.table th {
    box-shadow: 0 1px #dee2e6, 0 -1px #dee2e6;/*1st for bottom, 2nd for top*/
}

Here is Sandbox link

Also change value of top to 1px

.react-bootstrap-table th {
  position: sticky;
  top: 1px;
  background-color: #fff;
}
Gautam Naik
  • 8,990
  • 3
  • 27
  • 42
2

You can use a pseudo element to create the border, so it stays with the th:

.react-bootstrap-table .table-bordered {
  border-top: none;
}

.react-bootstrap-table th {
  position: sticky;
  top: 0;
  background-color: #fff;
  border-top: none;
}

.react-bootstrap-table th::before {
  position: absolute;
  content: '';
  top: 0;
  left: -2px;
  width: calc( 100% + 2px);
  height: 1px;;
  background-color: #dee2e6;
}

.react-bootstrap-table th::after {
  position: absolute;
  content: '';
  bottom: -2px;
  left: -2px;
  width: calc( 100% + 2px);
  height: 1px;;
  background-color: #dee2e6;
}

I changed the top to 0 on the th as well.

Edit to keep bottom border.

disinfor
  • 10,865
  • 2
  • 33
  • 44