Freeze first row and first column of table

Question

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%;
}

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

The simple way is use a plugin.http://www.jqueryscript.net/table/jQuery-Plugin-For-Fixed-Table-Header-Footer-Columns-TableHeadFixer.html — Naveen DA, Jul 14 '17 at 12:42
@NaveenDA That's a nice option. The only thing that this plugin does not account for is the very first cell (in the demo - Ano), which scrolls out of sight as soon as you start scrolling in either direction. — Chava Geldzahler, Jul 17 '17 at 05:27
Its my plugin and look at my demo https://naveenda.github.io/tablenav/ — Naveen DA, Jul 17 '17 at 05:31

Chava Geldzahler · Accepted Answer · 2019-10-27T21:21:29.667

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

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

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>

yes it is worked. but I need the ID column to be locked too. what should I do? — Zulfikar Sandy Pratama, Jul 13 '17 at 07:06
You can position the first column cells as absolute and the easiest way to make sure the height is the same as the not absolute cells, is to mimic the column again. Since your first column is absolute, the mimic one will go behind it and you will never see it. In this case your table need to show all of the rows, you cannot have hidden rows since your first column is frozen, if you have hidden rows then your first column will not match the stuff on the right of it when you scroll down to see other hidden rows — Huangism, Jul 13 '17 at 20:17
@ZulfikarSandyPratama It's not possible to achieve that with pure CSS. If you are open to JavaScript/jQuery solutions, then add these tags to your question, so I can update my answer with a solution that would work. — Chava Geldzahler, Jul 13 '17 at 21:20
Unfortunately this doesn't work if you have a complex header. — loctrice, Feb 28 '18 at 19:31
@ChavaG do you know how can we convert your Js to work with a dynamically created table? — user466130, Jul 31 '18 at 08:39
Make sure the JS is executed after the table has been created. — Chava Geldzahler, Jul 31 '18 at 13:51

score 6 · Answer 2 · answered Jan 05 '21 at 15:33

If anyone struggles with such problem here is a solution for modern browsers without using jQuery or even JS - just pure HTML and CSS. The trick is to set table to relative position and first row and/or column cells to sticky position. I added explicitly background color and z-index values to have this overlapping feeling.

.wrapper {
  overflow: auto;
  height: 100px;
  width: 200px;
}

table {
  position: relative;
  border-collapse: separate;
  border-spacing: 0;
}

table th,
table td {
  width: 50px;
  padding: 5px;
  background-color: white;
}

table tbody {
  height: 90px;
}

table th {
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 2;
}

table th:nth-child(1) {
  left: 0;
  z-index: 3;
}

table td {
  text-align: center;
  white-space: pre;
}

table tbody tr td:nth-child(1) {
  position: sticky;
  left: 0;
  z-index: 1;
}

<div class="wrapper">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Age</th>
        <th>Country</th>
        <th>Hobbies</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>1</td>
        <td>George</td>
        <td>43</td>
        <td>New Zealand</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Ann</td>
        <td>25</td>
        <td>Great Britain</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Alexander</td>
        <td>41</td>
        <td>Spain</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Wasilij</td>
        <td>63</td>
        <td>Ukraine</td>
      </tr>
      <tr>
        <td>1</td>
        <td>George</td>
        <td>43</td>
        <td>New Zealand</td>
      </tr>
      <tr>
        <td>1</td>
        <td>George</td>
        <td>43</td>
        <td>New Zealand</td>
      </tr>
      <tr>
        <td>1</td>
        <td>George</td>
        <td>43</td>
        <td>New Zealand</td>
      </tr>
    </tbody>
  </table>
</div>

score 0 · Answer 3 · edited Nov 17 '17 at 07:50

I resoved this issue from myself with my colleague together yesterday. The adapted CSS is:

.pcvBody {
  overflow-x: auto;
  width: calc(100vw - 110px);

}
/* CSS START for freezing table column*/
#prodTable {
  position: relative;
  overflow: hidden;
}
#prodTable thead {
  position: relative;
  display: block;
  overflow: visible;
}
#prodTable thead th {
  min-width: 150px;
  width: 1000px;
}
#prodTable thead th:nth-child(1), #prodTable thead th:nth-child(2) {
  position: relative;
  /*display: block;*/
  max-width: 150px;
  width: 50px;
  border-left: 1px solid #ededed;
}
#prodTable tbody {
  position: relative;
  display: block;

}
#prodTable tbody td {
  min-width: 150px;
  width: 1000px;
}
#prodTable tbody input {
  max-width: 120px;
}
#prodTable tbody tr td:nth-child(1), #prodTable tbody tr td:nth-child(2) {
  position: relative;
  /*display: block;*/
  background-color: white;
  min-height: 20px;
  max-width: 150px;
  width: 50px;
  border-left: 1px solid #ededed;
}
/* CSS END for freezing table column*/

And the adjusted scroll event is:

$('#pcvBody').scroll(function(e) {
  var scrollLeft = $("#pcvBody").scrollLeft();
  //$('#prodTable thead').css("left", -tbodyScrollLeft);
  //$('#prodTable thead th:nth-child(1)').css("left", tbodyScrollLeft - 5); 
  //$('#prodTable tbody td:nth-child(1)').css("left", tbodyScrollLeft - 5); 
  $('#prodTable thead th:nth-child(1)').css("left", scrollLeft); 
  $('#prodTable tbody td:nth-child(1)').css("left", scrollLeft); 
  $('#prodTable thead th:nth-child(2)').css("left", scrollLeft);
  $('#prodTable tbody td:nth-child(2)').css("left", scrollLeft);
});

And in addition, I added a 'div' to wrap the table.

Freeze first row and first column of table

3 Answers3

Freeze First Row

Freeze First Row & First Column

Linked