固定表头，左列带有 x 和 y 滚动答案

【问题标题】：fixed table header, left column with x and y scroll固定表头，左列带有 x 和 y 滚动
【发布时间】：2016-01-04 05:06:42
【问题描述】：

我已使用此处另一个答案中的以下内容在此处设置了一个表格，但我想知道是否可以对其进行修改，以便我也可以修复第一列以进行水平滚动。

所以目前我正在使用这个作为模板：

html

<table>
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
            <th>Column 4</th>
            <th>Column 5</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1</td>
            <td>Row 1</td>
            <td>Row 1</td>
            <td>Row 1</td>
            <td>Row 1</td>
        </tr>
        <tr>
            <td>Row 2</td>
            <td>Row 2</td>
            <td>Row 2</td>
            <td>Row 2</td>
            <td>Row 2</td>
        </tr>
        <tr>
            <td>Row 3</td>
            <td>Row 3</td>
            <td>Row 3</td>
            <td>Row 3</td>
            <td>Row 3</td>
        </tr>
        <tr>
            <td>Row 4</td>
            <td>Row 4</td>
            <td>Row 4</td>
            <td>Row 4</td>
            <td>Row 4</td>
        </tr>
        <tr>
            <td>Row 5</td>
            <td>Row 5</td>
            <td>Row 5</td>
            <td>Row 5</td>
            <td>Row 5</td>
        </tr>
        <tr>
            <td>Row 6</td>
            <td>Row 6</td>
            <td>Row 6</td>
            <td>Row 6</td>
            <td>Row 6</td>
        </tr>
        <tr>
            <td>Row 7</td>
            <td>Row 7</td>
            <td>Row 7</td>
            <td>Row 7</td>
            <td>Row 7</td>
        </tr>
        <tr>
            <td>Row 8</td>
            <td>Row 8</td>
            <td>Row 8</td>
            <td>Row 8</td>
            <td>Row 8</td>
        </tr>
        <tr>
            <td>Row 9</td>
            <td>Row 9</td>
            <td>Row 9</td>
            <td>Row 9</td>
            <td>Row 9</td>
        </tr>
        <tr>
            <td>Row 10</td>
            <td>Row 10</td>
            <td>Row 10</td>
            <td>Row 10</td>
            <td>Row 10</td>
        </tr>
    </tbody>
</table>

css

html {
    font-family: verdana;
    font-size: 10pt;
    line-height: 25px;
}
table {
    border-collapse: collapse;
    width: 300px;
    overflow-x: scroll;
    display: block;
}
thead {
    background-color: #EFEFEF;
}
thead, tbody {
    display: block;
}
tbody {
    overflow-y: scroll;
    overflow-x: hidden;
    height: 140px;
}
td, th {
    min-width: 100px;
    height: 25px;
    border: dashed 1px lightblue;
}

jquery

$('table').on('scroll', function () {
    $("table > *").width($("table").width() + $("table").scrollLeft());
});

http://jsfiddle.net/mathijsflietstra/X2Kmd/1/

但我想修复左栏，这样当我向左滚动时它不会离开屏幕。我已经尝试将它的位置设置为固定的和绝对的，但是这会暴露所有的列并且它会超出屏幕并超出垂直滚动。

【问题讨论】：

标签： jquery html css

【解决方案1】：

我尝试寻找一个仅 CSS 的解决方案，但我无法找到一个具有良好兼容性的解决方案...不过我已经创建了一个 jQuery 解决方案：

http://jsfiddle.net/m9v1326t/

基本上，第一列的left CSS 属性是根据滚动位置来操作的。

var $stickyHeader = $('table thead tr th:first-child');
var $stickyCells = $('table tbody tr td:first-child');

$('table').on('scroll', function () {
  $stickyHeader.css('left', ($(this).scrollLeft()+'px'));
  $stickyCells.css('left', ($(this).scrollLeft()+'px'));
});

我还添加了一些额外的样式来完成这项工作，重要的是：

table thead tr th:first-child,
table tbody tr td:first-child{
  position:relative;
  ...

需要position:relative 才能使被操纵的left 属性按预期工作。

您可能需要添加更多样式来整理粘性列（虚线边框在滚动时会显示底层单元格），但这应该会让您走上正轨。

如果你在找什么，请告诉我。

【讨论】：

谢谢，我会在之前告诉你，让你知道 :) 我知道有一些 jquery 插件可以用于这样的事情，但一直很怀疑，以防某些东西得到更新并破坏应用程序
@JQuery- 是的，我尽量远离插件，除非出于同样的原因绝对必要。告诉我进展如何！

【解决方案2】：

<!DOCTYPE html>
<html>
<!-- example on http://torontographic.wordpress.com/ -->
<head>
<meta charset="utf-8" />
<title>Single Fixed Table</title>
<style type="text/css">
body, html {
    margin: 0px;
    padding: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
  background-color: #333;
    width: 100%;
    height: 100%;
}
* {
    margin: 0px;
    padding: 0px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#container {
    position: absolute;
    left: 50px;
    top: 40px;
    background: cyan;
}
#layersDiv, #layers-table, #container {
    width: 700px;
}
#viewport {
    overflow-x: scroll;
    overflow-y: hidden;
    width: 483px; /* 500 minus 17px scrollbar width */;
    margin-left: 200px;
}
#headerL, #headerR {
    position: absolute;
    height: 25px;
    z-index: 200;
}
#headerL {
    width: 200px;
    background: #f2f5f7;
}
#headerR {
    left: 200px;
    width: 483px; /* 500 minus 17px scrollbar width */;
    overflow-x: hidden;
    background: #f2f5f7;
    overflow: hidden;
}
#layersDiv {
    position: absolute;
    left: 0px;
    top: 0px;
    overflow-x: hidden;
    overflow-y: scroll;
}
#layersDiv, #layers-table, #viewport, #container {
    border-collapse: collapse;
    border-style: hidden;
    height: 180px;
    background: white;
}
#layers-table .layer {
    position: absolute;
    left: 0px;
    width: 200px;
    height: 25px;
}
#layers-table td {
    height: 25px;
    text-align: left;
    border-top: 1px solid Gainsboro;
    border-right: 1px solid Silver;
}
#layers-table {
    margin-top: 25px;
}
.lastrow {
    min-height: 50px;
}
/* timeline ruler*/
#ruler {
    position: relative;
    top: 0;
    left: 0;
    width: 1000px;
    height: 25px;
    background: #f2f5f7;
    border-bottom: #ccc 1px solid;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" 
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
  var ie = !!window.navigator.userAgent.match(/MSIE|Trident|Edge/); //IE screw ups

$("#layersDiv").on('scroll',function(e) { //trick to the single table layout
  if (ie) { $("#viewport").css('overflow-x','hidden'); } //hide horizontal in IE since IE does know how to reflow paint updates.
  var y = $("#layersDiv").scrollTop();
  var h = $("#layersDiv").height();
  $("#viewport").height(h+y);
});
/*IE fires mouseup (or not, depending on which version) when clicking scrollbar. Got to use mouseout*/
$('#layersDiv').on('mouseout',function(e) { if (ie) { $("#viewport").css('overflow-x','scroll'); } });

$('#viewport').on('scroll',function(e) { //need to update ruler position
  $('#headerR').scrollLeft($("#viewport").scrollLeft());
});

$('#layers-table tr:not(:last-child)').on('mousedown',function(e) {
  $('#layers-table td').css( 'background-color','white' );
  $(this).children('td').css( 'background-color','#d8eaf7' );
});

function drawRuler(){
  var canvas = $('#ruler')[0], tick=0, innerTicks=0, count=0; spacing = 10.0,y=0;
  canvas.width=$('#ruler').width(); canvas.height=$('#ruler').height();
  var context= canvas.getContext('2d');
  context.fillStyle = "#808080"; context.strokeStyle="#ccc";
  context.lineWidth = 1; context.font = "11px Arial";
  for(var i=0; i<canvas.width; i++){
    if(innerTicks==3){y=5;tick=25;innerTicks=0}else{y=20;tick=24;innerTicks++}
    var topPos = (i*spacing);
    var x = Math.floor(topPos)+.5;
    context.beginPath();
    context.moveTo(x,y);
    context.lineTo(x,tick);
    if (tick===25) {count++;context.fillText(count+'s',x,15);}
    context.stroke();
  };
}
drawRuler();
}); //end ready
</script>
</head>

<body>

<div id="container">
  <div id="headerL">I don't move </div>
  <div id="headerR">
    <canvas id="ruler">
    </canvas></div>
  <div id="layersDiv">
    <div id="viewport">
      <table id="layers-table">
        <tr id="1">
          <td class="layer">Track 1 </td>
          <td>Audio 1</td>
        </tr>
        <tr id="2">
          <td class="layer">Track 2 </td>
          <td>Audio 2</td>
        </tr>
        <tr id="3">
          <td class="layer">Track 3 </td>
          <td>Audio 3</td>
        </tr>
        <tr id="4">
          <td class="layer">Track 4 </td>
          <td>Audio 4</td>
        </tr>
        <tr id="5">
          <td class="layer">Track 5 </td>
          <td>Audio 5</td>
        </tr>
        <tr id="6">
          <td class="layer">Track 6 </td>
          <td>Audio 6</td>
        </tr>
        <tr id="7">
          <td class="layer">Track 7 </td>
          <td>Audio 7</td>
        </tr>
        <tr id="8">
          <td class="layer">Track 8 </td>
          <td>Audio 8</td>
        </tr>
        <tr id="lastrow" class="nodrag">
          <td class="layer lastrow"></td>
          <td>last row to pad for scrollbar below</td>
        </tr>
      </table>
    </div>
  </div>
</div>

</body>

</html>

【讨论】：