Bootstrap Snippet Scrollable Table Body using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container marginTop20">
    <table id="scrollableTable" class="table table-responsive table-sm scrollTable">
      <thead>
        <tr>
          <th>Name</th>
          <th>Country</th>
          <th>City</th>
          <th>Email</th>
          <th>Company</th>
          <th>Date Of Birth</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Jared Garcia</td>
          <td>Saint Vincent and The Grenadines</td>
          <td>Nairn</td>
          <td>tristique.pharetra@sedpede.edu</td>
          <td>Quis Diam Company</td>
          <td>07/04/20</td>
        </tr>
        <tr>
          <td>Carter Vang</td>
          <td>Saint Kitts and Nevis</td>
          <td>Saint-Honor</td>
          <td>Sed.malesuada@enimnectempus.com</td>
          <td>Nulla In Tincidunt Associates</td>
          <td>10/12/18</td>
        </tr>
        <tr>
          <td>Lance Gonzalez</td>
          <td>Japan</td>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
#scrollableTable {
  font-size: 15px;
  height: 100%;
  padding: 2px;
  table-layout: fixed;
  text-align: left;
  width: auto;
  overflow-x: auto;
}
#scrollableTable thead {
  background-color: #C3E6CB;
}
#scrollableTable th {
  border: 1px solid #CCC;
  font-weight: 600;
  padding: 2px;
  text-align: left;
}
#scrollableTable tbody {
  border-bottom: 1px solid #CCC;
}
.scrollTable tbody {
  display: block;
  max-height: 500px;
  /* Scroll container height. */
  overflow-y: auto;
}
#scrollableTable td {
  border-bottom: 1px solid #CCC;
  border-left: 1px solid #CCC;
  border-right: 1px solid #CCC;
  padding-left: 2px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
scrollTableColumnWidth();
// Window resize.
$(window).resize(function() {
  scrollTableColumnWidth();
});
/*
 * This function will set heading cells width equal to its coresponding table column width
 * for all tables with the 'scrollTable' class.
 */
function scrollTableColumnWidth() {
  let cell,
    tableArr = document.getElementsByClassName('scrollTable'),
    tableBodyWidth,
    tableHeadingCellArr,
    totalWidth;
  // Loop through all scrollable tables and correct the th widths.
  for (let tableIndex = 0; tableIndex < tableArr.length; tableIndex++) {
    tableHeadingCellArr = [];
    totalWidth = 0;
    // Get heading cells for current table.
    $(tableArr[tableIndex]).find('th').each(function(i, el) {
      tableHeadingCellArr.push(this);
    });
    // Set heading cell width for all heading cells in table except last.
    for (let i = 0; i < tableHeadingCellArr.length - 1; i++) {
      cell = $(tableArr[tableIndex]).find('tr:last').find('td').eq(i);
      $(tableHeadingCellArr[i]).outerWidth($(cell).outerWidth(true));
      totalWidth += $(cell).outerWidth(true);
    }
    /*
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Scrollable Table Body"
Bootstrap 4.1.1 Snippet by Cathal-O-Donnell

Related: See More

Questions / Comments:

"Scrollable Table Body" Bootstrap 4.1.1 Snippet by Cathal-O-Donnell

Related: See More

Questions / Comments:

"Scrollable Table Body"
Bootstrap 4.1.1 Snippet by Cathal-O-Donnell