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

时间：2017-04-21 06:18:45

标签： javascript jquery html css

我正在研究HTML表，所有数据都来自后端，并且有大量的列，超过80+。我的要求是Table标题将是固定和可滚动的。我尝试了很多东西，但它没有用。我尝试了多个jquery插件，它与我的页面其他js冲突。 所以，我想写简单的js，但它也没有用。 请帮帮我。

这是我的javascript代码

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

2 个答案:

答案 0 :(得分：1)

试用此代码 

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

答案 1 :(得分：0)

  

我做了2个解决方案，一个纯粹基于jquery，另一个基于css   。例如，我使用过bootstrap表。

jquery解决方案：

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

});
＆＃13; 
#tablefixheader {
  overflow: auto;
  height: 200px;
}

thead {
  background: #fff;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

css解决方案：

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题