HTML table with fixed header, vertical and horizontal scroll

Question

Hi all, I need a HTML responsive table with vertical scroll and horizontal scroll with first column fixed can any one share the idea for this horizontal scroll with name column fixed verical scroll with table header fixed Name config1 config2 config3 admin yes no yes student no yes no

Mageshwaran R · Answer

Script: $(document).ready( function () { $( '#example' ).DataTable( { "scrollY" : 200, "scrollX" : true } ); } ); "https://code.jquery.com/jquery-3.5.1.js" > "https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js" > "stylesheet" href= "https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" /> CSS: div.dataTables_wrapper { width : 800px ; margin : 0 auto ; } Table: table id = "example" class = "display nowrap" style = "width:100%" > thead > tr > th > Name th > th > config1 th > th > config2 th > th > config3 th > tr > thead > tbody > tr > td > admin td > td > yes td > td > no td > td > yes td > tr > tr > td > student td > td > no td > td > yes td > td > no td > tr > tbody > table >

Mageshwaran R · Answer

Hi Siva, HTML: link href = "//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel = "stylesheet" id = "bootstrap-css" > script src = "//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js" > script > script src = "//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" > script > div class = "container" > div class = "row" > div class = "panel panel-default" > div class = "panel-heading" > h4 > Fixed Header Scrolling Table h4 > div > table class = "table table-fixed" > thead > tr > th class = "col-xs-2" > # th > th class = "col-xs-8" > Name th > th class = "col-xs-2" > Points th > tr > thead > tbody > tr > td class = "col-xs-2" > 1 td > td class = "col-xs-8" > Mike Adams td > td class = "col-xs-2" > 23 td > tr > tr > td class = "col-xs-2" > 2 td > td class = "col-xs-8" > Holly Galivan td > td class = "col-xs-2" > 44 td > tr > tr > td class = "col-xs-2" > 3 td > td class = "col-xs-8" > Mary Shea td > td class = "col-xs-2" > 86 td > tr > tr > td class = "col-xs-2" > 4 td > td class = "col-xs-8" > Jim Adams td > td > 23 td > tr > tr > td class = "col-xs-2" > 5 td > td class = "col-xs-8" > Henry Galivan td > td class = "col-xs-2" > 44 td > tr > tr > td class = "col-xs-2" > 6 td > td class = "col-xs-8" > Bob Shea td > td class = "col-xs-2" > 26 td > tr > tr > td class = "col-xs-2" > 7 td > td class = "col-xs-8" > Andy Parks td > td class = "col-xs-2" > 56 td > tr > tr > td class = "col-xs-2" > 8 td > td class = "col-xs-8" > Bob Skelly td > td class = "col-xs-2" > 96 td > tr > tr > td class = "col-xs-2" > 9 td > td class = "col-xs-8" > William Defoe td > td class = "col-xs-2" > 13 td > tr > tr > td class = "col-xs-2" > 10 td > td class = "col-xs-8" > Will Tripp td > td class = "col-xs-2" > 16 td > tr > tr > td class = "col-xs-2" > 11 td > td class = "col-xs-8" > Bill Champion td > td class = "col-xs-2" > 44 td > tr > tr > td class = "col-xs-2" > 12 td > td class = "col-xs-8" > Lastly Jane td > td class = "col-xs-2" > 6 td > tr > tbody > table > div > div > div > CSS: .table- fixed thead { width : 97% ; } .table- fixed tbody { height : 230px ; overflow-y: auto ; width : 100% ; } .table- fixed thead, .table- fixed tbody, .table- fixed tr, .table- fixed td, .table- fixed th { display : block ; } .table- fixed tbody td, .table- fixed thead > tr> th { float : left ; border-bottom-width : 0 ; }

Sachin Singh · Answer

In html , the scroll generates when you fix height and length respectively without bootstrap . In bootstrap the same applies with screen size .use bootstrap responsive table. class = "table table-responsive table-bordered" > class = "thead-dark" > "col" ># "col" >First "col" >Last "col" >Handle "row" >1 Mark Otto @mdo