具有固定标题和滚动的表格

Question

I am working on HTML table, all data are coming from backend and there is a huge number of column, More than 80+. My requirement is Table header will be fixed and scrollable. I tried many things but it's not working. I tried multiple jquery plugins somewhere it conflict with my page other js. So, I am thinking to write plain js but it's also not working. Please help me out.

Here is my javascript code

var resizeCol = function () {
    var tiw = $('.table-body .table').width();
    $('.table-head').width(tiw);
    $('.table-body .table tr:first td').each(function (index, element) {
        var w = $(this).width(),
            i = $(this).index();
        $('.table-head th:eq(' + i + ')').width(w);
    });
}
resizeCol();
$(window).on("resize", function () {
    resizeCol();
});

var scrollTarget = function () {
    var target = $(".table-header");
    $(".table-body").scroll(function () {
        target.prop("scrollLeft", this.scrollLeft);
    });
}



$tableInner = $('.table-body');
$tableInner.attr('style', 'overflow: auto; width: auto; height: 300px');

resizeCol();
scrollTarget();

DEMO

Answer 1

Try this code

var resizeCol = function () {
   var body=$('.template_table').clone();
   body.addClass('body');
   $('.table-wrapper').append("<div class='table-body'></div>");
      $("table:first-child").wrap("<div class='table-head-scroll'></div>");
   $('.table-body').append(body);
   var curr = [];
   $("table.body th").each(function(i) {
                var tColumnWidth = $(this).width();
                curr.push(tColumnWidth);
   });
   $("table:first-child th").each(function(i){
        $(this).width(curr[i]);
   });
   $("table.body td").each(function(i) {
            $(this).width(curr[i]);
   });
   $("table.body thead").hide();
   $("table").css('width','100%');
     $(".table-head-scroll>table tbody").empty();
}
var scrollTarget = function () {
    var target = $(".table-head-scroll");
    $(".table-body").scroll(function () {
        target.prop("scrollLeft", this.scrollLeft);
    });
}
$(window).on("resize", function () {
    resizeCol();
});
$(document).ready(function(){
resizeCol();
scrollTarget();
});

DEMO

Answer 2

I have made 2 solution one is purely on jquery basis and other on css . I have used bootstrap table for example.

The jquery solution:

 document.getElementById("tablefixheader").addEventListener("scroll", function() { var translate = "translate(0," + this.scrollTop + "px)"; this.querySelector("thead").style.transform = translate; }); 

 #tablefixheader { overflow: auto; height: 200px; } thead { background: #fff; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <p>Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy DataDummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy DataDummy DataDummy DataDummy DataDummy DataDummy DataDummy DataDummy DataDummy Data </p> <div class="" id="tablefixheader"> <table class="table "> <thead> <tr> <th class="col-xs-1">#</th> <th class="col-xs-4">First Name</th> <th class="col-xs-4">Last Name</th> <th class="col-xs-3">Username</th> </tr> </thead> <tbody> <tr> <td class="col-xs-1">3</td> <td class="col-xs-4">Mark</td> <td class="col-xs-4">Otto</td> <td class="col-xs-3">@mdo</td> </tr> <tr> <td class="col-xs-1">3</td> <td class="col-xs-4">Mark</td> <td class="col-xs-4">Otto</td> <td class="col-xs-3">@mdo</td> </tr> <tr> <td class="col-xs-1">3</td> <td class="col-xs-4">Mark</td> <td class="col-xs-4">Otto</td> <td class="col-xs-3">@mdo</td> </tr> <tr> <td class="col-xs-1">3</td> <td class="col-xs-4">Mark</td> <td class="col-xs-4">Otto</td> <td class="col-xs-3">@mdo</td> </tr> <tr> <td class="col-xs-1">3</td> <td class="col-xs-4">Mark</td> <td class="col-xs-4">Otto</td> <td class="col-xs-3">@mdo</td> </tr> <tr> <td class="col-xs-1">3</td> <td class="col-xs-4">Mark</td> <td class="col-xs-4">Otto</td> <td class="col-xs-3">@mdo</td> </tr> <tr> <td class="col-xs-1">3</td> <td class="col-xs-4">Mark</td> <td class="col-xs-4">Otto</td> <td class="col-xs-3">@mdo</td> </tr> <tr> <td class="col-xs-1">3</td> <td class="col-xs-4">Mark</td> <td class="col-xs-4">Otto</td> <td class="col-xs-3">@mdo</td> </tr> <tr> <td class="col-xs-1">3</td> <td class="col-xs-4">Mark</td> <td class="col-xs-4">Otto</td> <td class="col-xs-3">@mdo</td> </tr> </tbody> </table> </div> 

The css solution:

 .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 !important; float: left !important; } .table-fixed tbody td, .table-fixed thead>tr>th { float: left; border-bottom-width: 0; } .table-fixed tr { width: 100%; float: left; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="panel panel-default"> <table class="table table-fixed"> <thead> <tr> <th class="col-xs-1">#</th> <th class="col-xs-4">First Name</th> <th class="col-xs-4">Last Name</th> <th class="col-xs-3">Username</th> </tr> </thead> <tbody> <tr> <td class="col-xs-1">3</td> <td class="col-xs-4">Mark</td> <td class="col-xs-4">Otto</td> <td class="col-xs-3">@mdo</td> </tr> <tr> <td class="col-xs-1">3</td> <td class="col-xs-4">Mark</td> <td class="col-xs-4">Otto</td> <td class="col-xs-3">@mdo</td> </tr> <tr> <td class="col-xs-1">3</td> <td class="col-xs-4">Mark</td> <td class="col-xs-4">Otto</td> <td class="col-xs-3">@mdo</td> </tr> <tr> <td class="col-xs-1">3</td> <td class="col-xs-4">Mark</td> <td class="col-xs-4">Otto</td> <td class="col-xs-3">@mdo</td> </tr> <tr> <td class="col-xs-1">3</td> <td class="col-xs-4">Mark</td> <td class="col-xs-4">Otto</td> <td class="col-xs-3">@mdo</td> </tr> <tr> <td class="col-xs-1">3</td> <td class="col-xs-4">Mark</td> <td class="col-xs-4">Otto</td> <td class="col-xs-3">@mdo</td> </tr> <tr> <td class="col-xs-1">3</td> <td class="col-xs-4">Mark</td> <td class="col-xs-4">Otto</td> <td class="col-xs-3">@mdo</td> </tr> <tr> <td class="col-xs-1">3</td> <td class="col-xs-4">Mark</td> <td class="col-xs-4">Otto</td> <td class="col-xs-3">@mdo</td> </tr> <tr> <td class="col-xs-1">3</td> <td class="col-xs-4">Mark</td> <td class="col-xs-4">Otto</td> <td class="col-xs-3">@mdo</td> </tr> </tbody> </table> </div>