Freeze first row and first column of table

I am trying to freeze/lock the first row and the first column of a table.

I have tried giving thead position: absolute; or position: fixed; but it looks strange.

I have followed some answers but I am still confused how to make it.

My HTML / CSS Code :

th {    
   font-size: 80%;
   text-align: center;
}
td {
   font-size : 65%;
   white-space: pre;
   text-align: center;
}
.inner {
   overflow-x: scroll;
   overflow-y: scroll;
   width: 300px;
   height: 100px;
}
input {
   font-size : 65%;
}

JavaScript
​x
 
th {       font-size: 80%;   text-align: center;}td {   font-size : 65%;   white-space: pre;   text-align: center;}.inner {   overflow-x: scroll;   overflow-y: scroll;   width: 300px;   height: 100px;}input {   font-size : 65%;}

<body>
  <div class="inner">
    <form method="POST" action="dashboard">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>ID</th>
            <th>Tanggal</th>
            <th>Judul Pekerjaan</th>
            <th>Deskripsi</th>
            <th>Level</th>
            <th>Category</th>
            <th>Severity</th>
          </tr>
        </thead>
    </form>
        <tbody>
          <tr>
            <td>1</td>
            <td>1 May 2017</td>
            <td>Satu</td>
            <td>Satu</td>
          </tr>
          <tr>
            <td>2</td>
            <td>2 May 2017</td>
            <td>Dua</td>
            <td>Dua</td>
          </tr>
          <tr>
            <td>3</td>
            <td>3 May 2017</td>
            <td>Tiga</td>
            <td>Tiga</td>
          </tr>
          <tr>
            <td>3</td>
            <td>3 May 2017</td>
            <td>Tiga</td>
            <td>Tiga</td>
          </tr>
        </tbody>
      </table>
  </div>
</body>

JavaScript
 
<body>  <div class="inner">    <form method="POST" action="dashboard">      <table class="table table-bordered">        <thead>          <tr>            <th>ID</th>            <th>Tanggal</th>            <th>Judul Pekerjaan</th>            <th>Deskripsi</th>            <th>Level</th>            <th>Category</th>            <th>Severity</th>          </tr>        </thead>    </form>        <tbody>          <tr>            <td>1</td>            <td>1 May 2017</td>            <td>Satu</td>            <td>Satu</td>          </tr>          <tr>            <td>2</td>            <td>2 May 2017</td>            <td>Dua</td>            <td>Dua</td>          </tr>          <tr>            <td>3</td>            <td>3 May 2017</td>            <td>Tiga</td>            <td>Tiga</td>          </tr>          <tr>            <td>3</td>            <td>3 May 2017</td>            <td>Tiga</td>            <td>Tiga</td>          </tr>        </tbody>      </table>  </div></body>

Answer

Freeze First Row

Freezing the first row can be done with CSS by setting the table body to overflow: auto, and giving a fixed width to the table cells. (See example 1)

Freeze First Row & First Column

However, to get this behavior for both first row and first column, you need to separate the first row, first column, and first cell from the table, and then continuously set the position of these elements based on the scrolled position of the table body, upon a scroll event. (See example 2)

Example 1: (Freeze first row only)

table thead tr {
    display: block;
}
table th, table td {
    width: 80px;
}
table tbody {
    display: block;
    height: 90px;
    overflow: auto;
}
th {
    text-align: center;
}
td {
    text-align: center;
    white-space: pre;
}

JavaScript
 
table thead tr {    display: block;}table th, table td {    width: 80px;}table tbody {    display: block;    height: 90px;    overflow: auto;}th {    text-align: center;}td {    text-align: center;    white-space: pre;}

<table class="table table-bordered">
  <thead>
    <tr>
      <th>ID</th>
      <th>Tanggal</th>
      <th>Judul Pekerjaan</th>
      <th>Deskripsi</th>
      <th>Level</th>
      <th>Category</th>
      <th>Severity</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>1</td>
      <td>1 May 2017</td>
      <td>Satu</td>
      <td>Satu</td>
    </tr>
    <tr>
      <td>2</td>
      <td>2 May 2017</td>
      <td>Dua</td>
      <td>Dua</td>
    </tr>
    <tr>
      <td>3</td>
      <td>3 May 2017</td>
      <td>Tiga</td>
      <td>Tiga</td>
    </tr>
    <tr>
      <td>3</td>
      <td>3 May 2017</td>
      <td>Tiga</td>
      <td>Tiga</td>
    </tr>
    <tr>
      <td>2</td>
      <td>2 May 2017</td>
      <td>Dua</td>
      <td>Dua</td>
    </tr>
    <tr>
      <td>3</td>
      <td>3 May 2017</td>
      <td>Tiga</td>
      <td>Tiga</td>
    </tr>
    <tr>
      <td>3</td>
      <td>3 May 2017</td>
      <td>Tiga</td>
      <td>Tiga</td>
    </tr>
  </tbody>
</table>

JavaScript
 
<table class="table table-bordered">  <thead>    <tr>      <th>ID</th>      <th>Tanggal</th>      <th>Judul Pekerjaan</th>      <th>Deskripsi</th>      <th>Level</th>      <th>Category</th>      <th>Severity</th>    </tr>  </thead>​  <tbody>    <tr>      <td>1</td>      <td>1 May 2017</td>      <td>Satu</td>      <td>Satu</td>    </tr>    <tr>      <td>2</td>      <td>2 May 2017</td>      <td>Dua</td>      <td>Dua</td>    </tr>    <tr>      <td>3</td>      <td>3 May 2017</td>      <td>Tiga</td>      <td>Tiga</td>    </tr>    <tr>      <td>3</td>      <td>3 May 2017</td>      <td>Tiga</td>      <td>Tiga</td>    </tr>    <tr>      <td>2</td>      <td>2 May 2017</td>      <td>Dua</td>      <td>Dua</td>    </tr>    <tr>      <td>3</td>      <td>3 May 2017</td>      <td>Tiga</td>      <td>Tiga</td>    </tr>    <tr>      <td>3</td>      <td>3 May 2017</td>      <td>Tiga</td>      <td>Tiga</td>    </tr>  </tbody></table>

Example 2: (Freeze first row and first column)

$(document).ready(function() {
  $('tbody').scroll(function(e) { 
    $('thead').css("left", -$("tbody").scrollLeft());
    $('thead th:nth-child(1)').css("left", $("tbody").scrollLeft()-5); 
    $('tbody td:nth-child(1)').css("left", $("tbody").scrollLeft()-5); 
  });
});

JavaScript
 
$(document).ready(function() {  $('tbody').scroll(function(e) {     $('thead').css("left", -$("tbody").scrollLeft());    $('thead th:nth-child(1)').css("left", $("tbody").scrollLeft()-5);     $('tbody td:nth-child(1)').css("left", $("tbody").scrollLeft()-5);   });});

body {
  margin: 0;
}
th, td {
    text-align: center;
    background-color: white
}
table {
  position: relative;
  width: 400px;
  overflow: hidden;
}
thead {
  position: relative;
  display: block;
  width: 400px;
  overflow: visible;
}
thead th {
  min-width: 80px;
  height: 40px;
}
thead th:nth-child(1) {
  position: relative;
  display: block;
  height: 40px;
  padding-top: 20px;
}
tbody {
  position: relative;
  display: block;
  width: 400px;
  height: 90px;
  overflow: scroll;
}
tbody td {
  min-width: 80px;
}
tbody tr td:nth-child(1) {
  position: relative;
  display: block;
}

JavaScript
 
body {  margin: 0;}th, td {    text-align: center;    background-color: white}table {  position: relative;  width: 400px;  overflow: hidden;}thead {  position: relative;  display: block;  width: 400px;  overflow: visible;}thead th {  min-width: 80px;  height: 40px;}thead th:nth-child(1) {  position: relative;  display: block;  height: 40px;  padding-top: 20px;}tbody {  position: relative;  display: block;  width: 400px;  height: 90px;  overflow: scroll;}tbody td {  min-width: 80px;}tbody tr td:nth-child(1) {  position: relative;  display: block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered">
  <thead>
    <tr>
      <th>ID</th>
      <th>Tanggal</th>
      <th>Judul Pekerjaan</th>
      <th>Deskripsi</th>
      <th>Level</th>
      <th>Category</th>
      <th>Severity</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>1</td>
      <td>1 May 2017</td>
      <td>Satu</td>
      <td>Satu</td>
      <td>5</td>
      <td>Lorem</td>
      <td>Ipsum</td>
    </tr>
    <tr>
      <td>2</td>
      <td>2 May 2017</td>
      <td>Dua</td>
      <td>Dua</td>
    </tr>
    <tr>
      <td>3</td>
      <td>3 May 2017</td>
      <td>Tiga</td>
      <td>Tiga</td>
    </tr>
    <tr>
      <td>3</td>
      <td>3 May 2017</td>
      <td>Tiga</td>
      <td>Tiga</td>
    </tr>
    <tr>
      <td>2</td>
      <td>2 May 2017</td>
      <td>Dua</td>
      <td>Dua</td>
    </tr>
    <tr>
      <td>3</td>
      <td>3 May 2017</td>
      <td>Tiga</td>
      <td>Tiga</td>
    </tr>
    <tr>
      <td>3</td>
      <td>3 May 2017</td>
      <td>Tiga</td>
      <td>Tiga</td>
    </tr>
  </tbody>
</table>

JavaScript
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><table class="table table-bordered">  <thead>    <tr>      <th>ID</th>      <th>Tanggal</th>      <th>Judul Pekerjaan</th>      <th>Deskripsi</th>      <th>Level</th>      <th>Category</th>      <th>Severity</th>    </tr>  </thead>​  <tbody>    <tr>      <td>1</td>      <td>1 May 2017</td>      <td>Satu</td>      <td>Satu</td>      <td>5</td>      <td>Lorem</td>      <td>Ipsum</td>    </tr>    <tr>      <td>2</td>      <td>2 May 2017</td>      <td>Dua</td>      <td>Dua</td>    </tr>    <tr>      <td>3</td>      <td>3 May 2017</td>      <td>Tiga</td>      <td>Tiga</td>    </tr>    <tr>      <td>3</td>      <td>3 May 2017</td>      <td>Tiga</td>      <td>Tiga</td>    </tr>    <tr>      <td>2</td>      <td>2 May 2017</td>      <td>Dua</td>      <td>Dua</td>    </tr>    <tr>      <td>3</td>      <td>3 May 2017</td>      <td>Tiga</td>      <td>Tiga</td>    </tr>    <tr>      <td>3</td>      <td>3 May 2017</td>      <td>Tiga</td>      <td>Tiga</td>    </tr>  </tbody></table>

Advertisement

Answer

Freeze First Row

Freeze First Row & First Column