"Scrollable Table Body"
Bootstrap 4.1.1 Snippet by adriano3429

<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="//code.jquery.com/jquery-1.11.1.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> <td>Maintal</td> <td>consectetuer@loremac.ca</td> <td>Orci Luctus PC</td> <td>13/06/19</td> </tr> <tr> <td>Arden Christian</td> <td>Tokelau</td> <td>Detroit</td> <td>mus.Aenean@sapienCrasdolor.ca</td> <td>Neque PC</td> <td>22/08/18</td> </tr> <tr> <td>Charles Hatfield</td> <td>Saint Kitts and Nevis</td> <td>La Spezia</td> <td>auctor.nunc.nulla@Duisdignissim.com</td> <td>Non Sollicitudin A Consulting</td> <td>03/03/20</td> </tr> <tr> <td>Philip Green</td> <td>Yemen</td> <td>Ingraj Bazar</td> <td>arcu@dolorFusce.co.uk</td> <td>Pede Nonummy Ut PC</td> <td>23/03/20</td> </tr> <tr> <td>Oscar Rice</td> <td>Canada</td> <td>Aurora</td> <td>ut.dolor.dapibus@nascetur.co.uk</td> <td>Vivamus Nibh Dolor Company</td> <td>15/01/20</td> </tr> <tr> <td>Harper Simon</td> <td>Panama</td> <td>Barddhaman</td> <td>elit@nonloremvitae.org</td> <td>Donec Egestas Limited</td> <td>23/11/18</td> </tr> <tr> <td>Kareem Wells</td> <td>Saint Pierre and Miquelon</td> <td>Saint Louis</td> <td>erat.eget.ipsum@euerat.ca</td> <td>Libero Est Congue Ltd</td> <td>11/09/18</td> </tr> <tr> <td>James Bruce</td> <td>Nicaragua</td> <td>Hampstead</td> <td>ligula.elit@utnisia.com</td> <td>Parturient Limited</td> <td>09/03/20</td> </tr> <tr> <td>Walter Koch</td> <td>Seychelles</td> <td>Morrovalle</td> <td>eu@egestasFusce.com</td> <td>Consectetuer Adipiscing Inc.</td> <td>11/05/20</td> </tr> <tr> <td>Tate Blackburn</td> <td>Peru</td> <td>Lissewege</td> <td>magna@dapibusidblandit.com</td> <td>Magna Incorporated</td> <td>17/11/18</td> </tr> <tr> <td>Stuart Pace</td> <td>Romania</td> <td>Kilsyth</td> <td>ligula.Nullam.enim@sempertellus.com</td> <td>Aliquam Eu Corporation</td> <td>20/08/19</td> </tr> <tr> <td>Odysseus Ashley</td> <td>Gibraltar</td> <td>Whitburn</td> <td>a.nunc.In@facilisisSuspendisse.org</td> <td>Vulputate Ullamcorper Magna Corp.</td> <td>28/10/19</td> </tr> <tr> <td>Kyle Perkins</td> <td>Nicaragua</td> <td>Anchorage</td> <td>quis.turpis@rutrum.net</td> <td>Purus Gravida Associates</td> <td>13/02/20</td> </tr> <tr> <td>Philip Ferrell</td> <td>Haiti</td> <td>Orléans</td> <td>Nulla.interdum@eratvelpede.com</td> <td>Egestas A Scelerisque Corporation</td> <td>05/01/19</td> </tr> <tr> <td>Deacon Jacobson</td> <td>Cook Islands</td> <td>Lethbridge</td> <td>Sed.auctor@pharetra.org</td> <td>Nunc Mauris Sapien Company</td> <td>16/04/19</td> </tr> <tr> <td>Hashim Mcdaniel</td> <td>French Southern Territories</td> <td>Kontich</td> <td>vehicula@nascetur.com</td> <td>Mollis Duis Sit Corporation</td> <td>08/07/20</td> </tr> <tr> <td>Harlan Michael</td> <td>Myanmar</td> <td>San Sostene</td> <td>euismod.in.dolor@sedest.com</td> <td>Est Congue PC</td> <td>23/03/19</td> </tr> <tr> <td>Armand Wells</td> <td>Ecuador</td> <td>Gonnosnò</td> <td>porttitor.tellus@IntegermollisInteger.net</td> <td>Et Industries</td> <td>26/03/19</td> </tr> <tr> <td>Abbot Barber</td> <td>Mali</td> <td>San Piero Patti</td> <td>consequat.auctor@Proinsedturpis.net</td> <td>Lacus Institute</td> <td>14/08/18</td> </tr> <tr> <td>Dexter Guzman</td> <td>Mayotte</td> <td>Polatlı</td> <td>parturient.montes.nascetur@quam.net</td> <td>Mi Lorem Vehicula Incorporated</td> <td>26/05/20</td> </tr> <tr> <td>Shad Graham</td> <td>Sierra Leone</td> <td>Tuscaloosa</td> <td>parturient@laciniavitaesodales.com</td> <td>Sed Institute</td> <td>02/04/20</td> </tr> <tr> <td>Wylie Saunders</td> <td>Guatemala</td> <td>Capena</td> <td>nisl@velitPellentesqueultricies.net</td> <td>Ultrices Corporation</td> <td>25/07/18</td> </tr> <tr> <td>Lawrence Mcconnell</td> <td>Bolivia</td> <td>Leoben</td> <td>Aliquam.ornare.libero@mattissemper.co.uk</td> <td>Cursus Industries</td> <td>10/01/19</td> </tr> </tbody> </table> </div>
#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; width: 1%; word-wrap: break-word; } #scrollableTable table tr:last-child { border-bottom: none; } .marginTop20 { margin-top: 20px; }
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); } /* * Set last table heading cell width equal to remaining width * (table body width - sum of rest heading cells), this will 'house' the scrollbar. */ tableBodyWidth = $(tableArr[tableIndex]).find('tbody').outerWidth(true); $(tableHeadingCellArr[tableHeadingCellArr.length - 1]).outerWidth(tableBodyWidth - totalWidth); } }

Related: See More


Questions / Comments: