Scrollable tbody in a responsive Bootstrap 4 table

Question

Scrollable tbody in a responsive Bootstrap 4 table

Utilizing Bootstrap 4, I have implemented a responsive table that I want to have a scrollable body. The table is structured as follows:

<div class="table-responsive">
  <table class="table table-striped table-hover custom-table text-nowrap">
    <thead>
      <tr>
        <th>row1</th>
        <th>row2</th>
        <th>row2</th>
      </tr>
    </thead>
    <tbody>
      <!-- some rows -->
    </tbody>
  </table>

To enable scrolling in the tbody, I applied a scss class .custom-table to the table, like this:

.custom-table {
  tbody {
     height: 50px;
     overflow-y: auto;
     width: 100%;
     display: block;
  }
}

Unfortunately, the applied styling is not functioning as expected. The content in the tbody is shifting to the left. You can view the issue in this JSFiddle example. What could be causing this problem?

html css twitter-bootstrap bootstrap-table

Answer 1

Answer №1

Kindly review below, I personally opt for utilizing flexbox. I have also integrated -webkit and -ms prefixes to ensure better cross-browser compatibility.

  tbody , thead {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  tr {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  th,td {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: center;
  }

  tbody {
     height: 50px;
     overflow-y: auto;
  }

  thead {
    padding-right: 20px;
  }

I have applied padding-right to thead specifically due to the scrollbar present on tbody.

Answer 2

Kindly review below, I personally opt for utilizing flexbox. I have also integrated -webkit and -ms prefixes to ensure better cross-browser compatibility.

  tbody , thead {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  tr {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  th,td {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: center;
  }

  tbody {
     height: 50px;
     overflow-y: auto;
  }

  thead {
    padding-right: 20px;
  }

I have applied padding-right to thead specifically due to the scrollbar present on tbody.

Answer 3

Answer №2

Have you attempted to implement this?

Adjust your CSS code to look like this

.custom-table> tbody {
    display:block;
    height:50px;
    overflow:auto;
}
.custom-table> thead, tbody tr {
    display:table;
    width:100%;         
}
.custom-table> thead {
    width:   100%   
}
.custom-table {
    width:100%;
}

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

<div class="table-responsive">
  <table class="table table-striped table-hover custom-table text-nowrap">
    <thead>
      <tr>
        <th>row1</th>
        <th>row2</th>
        <th>row2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>text1</td>
        <td>text2</td>
        <td>text3</td>
      </tr>
      <tr>
        <td>text4</td>
        <td>text5</td>
        <td>text6</td>
      </tr>
      <tr>
        <td>text7</td>
        <td>text8</td>
        <td>text9</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 4

Have you attempted to implement this?

Adjust your CSS code to look like this

.custom-table> tbody {
    display:block;
    height:50px;
    overflow:auto;
}
.custom-table> thead, tbody tr {
    display:table;
    width:100%;         
}
.custom-table> thead {
    width:   100%   
}
.custom-table {
    width:100%;
}

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

<div class="table-responsive">
  <table class="table table-striped table-hover custom-table text-nowrap">
    <thead>
      <tr>
        <th>row1</th>
        <th>row2</th>
        <th>row2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>text1</td>
        <td>text2</td>
        <td>text3</td>
      </tr>
      <tr>
        <td>text4</td>
        <td>text5</td>
        <td>text6</td>
      </tr>
      <tr>
        <td>text7</td>
        <td>text8</td>
        <td>text9</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 5

Answer №3

Implementing Udara Kasun's approach with adjustments for better column alignment:

.custom-table>tbody {
  display: block;
  height: 50px;
  overflow: auto;
}
.custom-table>thead,
tr {
  display: block;
  width: 100%;
}

.custom-table>thead {
  width: 100%
}

.custom-table {
  width: 100%;
}

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="187a77776c6b6c6a7968582d3628362a">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="294b46465d5a5d5b4859691c0719071b">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<div class="container-fluid">
  <div class="flex-group-1" style="overflow-y: auto">
    <table class="table table-striped table-hover custom-table table-bordered table-responsive ">
      <thead>
        <tr>
          <th width="100">col1</th>
          <th width="100">col2</th>
          <th width="100">col3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td width="100">text1</td>
          <td width="100">text2</td>
          <td width="100">text3</td>
        </tr>
        <tr>
          <td width="100">text4</td>
          <td width="100">text5</td>
          <td width="100">text6</td>
        </tr>
        <tr>
          <td width="100">text7</td>
          <td width="100">text8</td>
          <td width="100">text9</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Answer 6

Implementing Udara Kasun's approach with adjustments for better column alignment:

.custom-table>tbody {
  display: block;
  height: 50px;
  overflow: auto;
}
.custom-table>thead,
tr {
  display: block;
  width: 100%;
}

.custom-table>thead {
  width: 100%
}

.custom-table {
  width: 100%;
}

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="187a77776c6b6c6a7968582d3628362a">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="294b46465d5a5d5b4859691c0719071b">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<div class="container-fluid">
  <div class="flex-group-1" style="overflow-y: auto">
    <table class="table table-striped table-hover custom-table table-bordered table-responsive ">
      <thead>
        <tr>
          <th width="100">col1</th>
          <th width="100">col2</th>
          <th width="100">col3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td width="100">text1</td>
          <td width="100">text2</td>
          <td width="100">text3</td>
        </tr>
        <tr>
          <td width="100">text4</td>
          <td width="100">text5</td>
          <td width="100">text6</td>
        </tr>
        <tr>
          <td width="100">text7</td>
          <td width="100">text8</td>
          <td width="100">text9</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Answer 7

Answer №4

How to Create a Fixed Heading Row and Vertically Scrollable Table in Bootstrap 5 Using CSS Only

To achieve this effect, you need to wrap the table in a div element.

Here is the HTML code:

<!-- Table  -->
  <div class="container shadow-sm alarm-table">
    <table class="table">
      <thead class="table-primary">
        <tr>
          <th scope="col">ID</th>
          <th scope="col">Name</th>
          <th scope="col">Email</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>John</td>
          <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="701a1f181e30151d11191c5e131f1d">[email protected]</a></td>
        </tr>
        <tr>
          <td>1</td>
          <td>John</td>
          <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d6bcb9beb896b3bbb7bfbaf8b5b9bb">[email protected]</a></td>
        </tr>
        <tr>
          <td>1</td>
          <td>John</td>
          <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e48e8b8c8aa48189858d88ca878b89">[email protected]</a></td>
        </tr>
        <tr>
          <td>1</td>
          <td>John</td>
          <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="157f7a7d7b557078747c793b767a78">[email protected]</a></td>
        </tr>
      </tbody>
    </table>
  </div>

And the CSS code:

/* Makes table scrollable */
.alarm-table{
  height: 150px;
  overflow: auto;
}

/* Makes table heading-row stick to top when scrolling */
.container .table thead tr{
  position: sticky;
  top: 0;
}

Answer 8

How to Create a Fixed Heading Row and Vertically Scrollable Table in Bootstrap 5 Using CSS Only

To achieve this effect, you need to wrap the table in a div element.

Here is the HTML code:

<!-- Table  -->
  <div class="container shadow-sm alarm-table">
    <table class="table">
      <thead class="table-primary">
        <tr>
          <th scope="col">ID</th>
          <th scope="col">Name</th>
          <th scope="col">Email</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>John</td>
          <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="701a1f181e30151d11191c5e131f1d">[email protected]</a></td>
        </tr>
        <tr>
          <td>1</td>
          <td>John</td>
          <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d6bcb9beb896b3bbb7bfbaf8b5b9bb">[email protected]</a></td>
        </tr>
        <tr>
          <td>1</td>
          <td>John</td>
          <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e48e8b8c8aa48189858d88ca878b89">[email protected]</a></td>
        </tr>
        <tr>
          <td>1</td>
          <td>John</td>
          <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="157f7a7d7b557078747c793b767a78">[email protected]</a></td>
        </tr>
      </tbody>
    </table>
  </div>

And the CSS code:

/* Makes table scrollable */
.alarm-table{
  height: 150px;
  overflow: auto;
}

/* Makes table heading-row stick to top when scrolling */
.container .table thead tr{
  position: sticky;
  top: 0;
}

Scrollable tbody in a responsive Bootstrap 4 table

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the best way to save a PDF from within a frame using JavaScript and an HTML5 <embed> tag?

Interactive feature in Three.js causes page to scroll downwards upon object selection

The PointLight feature in Three.js does not support more than 2 lights simultaneously

AJAX code fetching dynamic content without relying on file loading

Do not make unnecessary calls to the server when changing the display property of an HTML object

Secret message concealed within the depths of my Bootstrap 5 Side Navbar

Struggling to locate a straightforward sidebar solution without relying on Bootstrap. Finding an easy-to-use answer seems

"After clicking the button for the second time, the jQuery on-click function begins functioning properly

Removing Borders from HTML Tables

Converting plain text to HTML in emails using Outlook

Preserve marked checkboxes upon page refresh

Angular material: issue with alignment of table inside mat-expansion compared to other table

How to troubleshoot a Django template where the Bootstrap modal dialog fails to appear upon clicking a button or

Transferring data from JavaScript to PHP with the help of AJAX

What steps should I take to ensure my navigation bar spans across the entire page?

Utilize the display property with grid to effortlessly expand a block to occupy the entire width

How come when you add ({}+{}) it equals to "[object Object][object Object]"?

Combining TypeScript into HTML resulted in an error: Uncaught ReferenceError clickbutton is not defined

Choosing the initial tab to display when the page loads from a selection of 3 tabs

Create a stylish grid layout with perfectly centered content using CSS