CODEWITHSUNDEEP
jqueryhtmlcss
JQuery
JQuery

Reputation: 907

fixed table header, left column with x and y scroll

I have used the below from a another answer on here to have a table on here but am wondering if it is possible to modify it so that i can fix the first column for horizontal scrolling also.

So currently I'm using this as a template:

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/

But I want to fix the left column so when i scroll left it doesn't go off screen. I have tried making the position of it fixed and absolute but that then exposes all off the column and it runs off screen and out of the vertical scrolling.

Upvotes: 1

Views: 2451

Answers (2)

user3026911
user3026911

Reputation: 51

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

Upvotes: 0

Alvin Pascoe
Alvin Pascoe

Reputation: 1209

I tried looking for a CSS only solution but I couldn't manage to find one with decent compatability...I have created a jQuery solution though:

http://jsfiddle.net/m9v1326t/

Basically, the left CSS property of the first column is manipulated based on the scroll position.

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'));
});

I also added a few extra styles to make this work, the important one is:

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

position:relative is needed for the manipulated left property to work as intended.

You may need to add a few more styles to neaten up the sticky column (the dashed border reveals the underlying cells when scrolling) but this should get you on the right track.

Let me know if its what you were looking for.

Upvotes: 1

Related Questions