固定表頭，x和y滾動左列

我已經使用下面從另一個答案在這裏有一個表在這裏，但我想知道是否可以修改它，以便我可以修復第一列水平滾動也。固定表頭，x和y滾動左列

所以我目前使用其作爲模板：

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/

但我想修復左欄，所以當我向左滾動它不會離開屏幕。我試圖讓它的位置是固定的和絕對的，但是這會暴露出所有的列，並且它在屏幕上運行並離開垂直滾動。

來源

2015-10-13 JQuery

我試圖尋找一個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財產按預期工作。

您可能需要添加更多樣式來更新粘性列（虛線邊框顯示滾動時的底層單元格），但這應該會讓您處於正確的軌道上。

讓我知道，如果它是你在找什麼。

來源

2015-10-13 18:29:01

感謝我給這之前，讓你知道:)我知道有一些jQuery插件，你可以使用這樣的事情，但一直在萬一可疑的更新，並且打破了應用 – JQuery

@JQuery - 是的，除非出於同樣的原因絕對必要，否則我會盡量遠離插件。讓我知道事情的後續！ –

<!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>

來源

2016-01-03 21:06:42 user3026911

固定表頭，x和y滾動左列

回答

相關問題