Bootstrap responsive table with fixed headers on all device sizes?

Question

I currently have this Bootstrap table and the problem I'm facing is that the sticky headers aren't working without removing the Bootstrap .table-responsive class. Is this possible without using JS?

.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-fixed {
  width: 100%;
}


/* This will work on every browser but Chrome Browser */

.table-fixed thead {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 999;
  background-color: #FFF;
}


/*This will work on every browser*/

.table-fixed thead th {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  background-color: #FFF;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="table-responsive">
  <table class="table table-striped table-fixed">
    <thead>
      <tr>
        <th>Test</th>
        <th>Test</th>
      </tr>
    </thead>
  </table>
</div>

I don't believe so. Just today I fixed a sticky header problem on JQuery tablesorter by doing $('.container').off('scroll') and appending the CSS position: sticky. JQuery tablesorter has an update using CSS instead of JS for sticky positioning if we update tablesorter, maybe see if Bootstrap table has similar? Good luck, let me know if you figure it out. — MaKR, May 15 '19 at 19:58
its a known issue see : https://stackoverflow.com/a/44004100/2757519 — Dev Man, May 15 '19 at 20:10
@ImmortalDude If I remove the table-responsive class then it works similar to that post but I need the table to be responsive as well. — James, May 15 '19 at 20:15

score 0 · Answer 1 · answered May 07 '21 at 05:15

position sticky doesn't work with some table elements (thead/tr) in Chrome. You have added sticky position in thead and th both. try below steps.

remove stick position from thead and keep only in th
Add overflow-x: visible for table-responsive class.

Thanks

score 0 · Answer 2 · edited Jun 02 '22 at 02:14

See the below code to make table header sticky

<section class="">
  <div class="container">
    <table>
      <thead>
        <tr class="header">
          <th>
            Table attribute name
            <div>Table attribute name</div>
          </th>
          <th>
            Value
            <div>Value</div>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>align</td>
          <td>left, center, right</td>
        </tr>
        <tr>
          <td>cellpadding</td>
          <td>pixels</td>
        </tr>
        <tr>
          <td>cellspacing</td>
          <td>pixels</td>
        </tr>
        <tr>
          <td>frame</td>
          <td>void, above, below, hsides, lhs, rhs, vsides, box, border
          </td>
        </tr>
        <tr>
          <td>rules</td>
          <td>none, groups, rows, cols, all</td>
        </tr>
        <tr>
          <td>summary</td>
          <td>text</td>
        </tr>
        <tr>
          <td>width</td>
          <td>pixels, %</td>
        </tr>
      </tbody>
    </table>
  </div>
</section>

<style>
  html,
  body {
    margin: 0;
    padding: 0;
    height: 100%;
  }
  
  section {
    position: relative;
    border: 1px solid #000;
    padding-top: 37px;
    background: #500;
  }
  
  section.positioned {
    position: absolute;
    top: 100px;
    left: 100px;
    width: 800px;
    box-shadow: 0 0 15px #333;
  }
  
  .container {
    overflow-y: auto;
    height: 160px;
  }
  
  table {
    border-spacing: 0;
    width: 100%;
  }
  
  td+td {
    border-left: 1px solid #eee;
  }
  
  td,
  th {
    border-bottom: 1px solid #eee;
    background: #ddd;
    color: #000;
    padding: 10px 25px;
  }
  
  th {
    height: 0;
    line-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    color: transparent;
    border: none;
    white-space: nowrap;
  }
  
  th div {
    position: absolute;
    background: transparent;
    color: #fff;
    padding: 9px 25px;
    top: 0;
    margin-left: -25px;
    line-height: normal;
    border-left: 1px solid #800;
  }
  
  th:first-child div {
    border: none;
  }
</style>

Bootstrap responsive table with fixed headers on all device sizes?

2 Answers2