Responsive table that follows as you scroll

Wappler General Need Help
12

In CSS set the table’s container height and the table to fit snug within the container as in"

  .table-responsive {
    height: 300px;
    overflow: auto;
  }

  .table {
    position: sticky;
    top: 0;
    width: 100%;
  }

The HTML will look like

        <div class="col">
          <div class="table-responsive">
            <table class="table">

As a side note: I would set the height of the table to the height of the page minus the height of the header and footer similar to

height: calc(100vh - 250px);
3 Likes