Table with Fixed Header and First Column

A simple method of fixing the header and first column of a table using CSS and a few lines of JQuery, feel free to comment, make suggestions or use the code in your own projects

by Manju06

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<head>
  <title>sample</title>
  <meta charset="utf-8" http-equiv="refresh" content="300">
  <link href="https://fonts.googleapis.com/css?family=Lato&display=block" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
  <div class="container">
    <table class="checkBox">
      <thead>
        <tr>
       
          <th>Name</th>
          <th>user1</th>
          <th>user2</th>
          <th>user3</th>
          <th>user4</th>
          <th>user5</th>
          <th>user6</th>
          <th>user7</th>
          <th>user8</th>
          <th>user9</th>
          <th>user10</th>
          <th>user11</th>
          <th>user12</th>
          <th>user13</th>
        </tr>
      </thead>
      <tbody>
        <tr id='row1'>
          <td>row1</td>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row2'>
          <td>row2</td>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row3'>
         <td>row3</td>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td...

CSS

table {
  position: relative;
  width: 900px;
  background-color: #aaa;
  overflow: hidden;
  border-collapse: collapse;
}


/*thead*/
thead {
  position: relative;
  display: block;
  width: 900px;
  overflow: visible;
}

thead th {
  background-color: #99a;
  min-width: 120px;
  height: 32px;
  border: 1px solid #222;
}

thead th:nth-child(1) {/*first cell in the header*/
  position: relative;
  display: block; /*seperates the first cell in the header from the header*/
  background-color: #88b;
}


/*tbody*/
tbody {
  position: relative;
  display: block; 
  width: 900px;
  height: 239px;
  overflow: scroll;
}

tbody td {
  background-color: #bbc;
  min-width: 120px;
  border: 1px solid #222;
}

tbody tr td:nth-child(1) { 
  position: relative;
  display: block; 
  height: 40px;
  background-color: #99a;
}

JavaScript

$(document).ready(function() {
  $('tbody').scroll(function(e) { //detect a scroll event on the tbody
  	/*
    Setting the thead left value to the negative valule of tbody.scrollLeft will make it track the movement
    of the tbody element. Setting an elements left value to that of the tbody.scrollLeft left makes it maintain 			it's relative position at the left of the table.    
    */
    $('thead').css("left", -$("tbody").scrollLeft()); //fix the thead relative to the body scrolling
    $('thead th:nth-child(1)').css("left", $("tbody").scrollLeft()); //fix the first cell of the header
    $('tbody td:nth-child(1)').css("left", $("tbody").scrollLeft()); //fix the first column of tdbody
  });
});