How to freeze the top and left of an HTML table at the same time

Question

I have the following long table (generated dynamically from database) showing in the whole page. It has vertical and horizontal scroll bars due to the length of the table.

I am able to fix the header in fixed position with the following CSS code

table {
  border-spacing: 0;
  width: 100%;
  overflow-y: auto;
  height: 50vh;
}

thead th {
  position: sticky;
  top: 0;
  background-color: white;
}

But I also want to freeze the left side th so that when I scroll the horizontal scroll bar, I still can see the left most column. Does anyone know how to do it?

Edit 1

The table I mentioned is generating dynamically. So I can't paste the original code as it contains mix of php and MySQL. So for a reference, I am pasting a bootstrap table to work

<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
      <th scope="col">Handle</th>
      <th scope="col">Handle</th>
      <th scope="col">Handle</th>
      <th scope="col">Handle</th>
      <th scope="col">Handle</th>
      <th scope="col">Handle</th>
      <th scope="col">Handle</th>
      <th scope="col">Handle</th>
      <th scope="col">Handle</th>
      <th scope="col">Handle</th>
      <th scope="col">Handle</th>
      <th scope="col">Handle</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
      <td>@mdo</td>
      <td>@mdo</td>
      <td>@mdo</td>
      <td>@mdo</td>
      <td>@mdo</td>
      <td>@mdo</td>
      <td>@mdo</td>
      <td>@mdo</td>
      <td>@mdo</td>
      <td>@mdo</td>
      <td>@mdo</td>
      <td>@mdo</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
      <td>@fat</td>
      <td>@fat</td>
      <td>@fat</td>
      <td>@fat</td>
      <td>@fat</td>
      <td>@fat</td>
      <td>@fat</td>
      <td>@fat</td>
      <td>@fat</td>
      <td>@fat</td>
      <td>@fat</td>
      <td>@fat</td>
      <td>@fat</td>
    </tr>
  </tbody>
</table>

It is actually a dynamic table with `php` and `MySQL` codes. If I post it here, I think it will just confuse only. We can consider a normal `HTML` table to see it. Probably I will post code for a simple `HTML` table. — Anu, Jul 03 '20 at 07:22
A possible solution could be found by using datatables. It's a JS solution, so it might not be what you're looking for, but check out https://datatables.net/extensions/fixedcolumns/examples/ — JohnDoe, Jul 03 '20 at 07:52
check [this](https://stackoverflow.com/questions/3402295/html-table-with-horizontal-scrolling-first-column-fixed) post might help you — Swati, Jul 03 '20 at 09:02
Problem with all the solutions provided is, it all focusing either one type of scrolling. What I need is there must be a freeze at the top header when I scroll vertically and during that time the left pane should move vertically upward too so that data in the table will show right. At the same time when i scroll horizontally, the left panel must freeze as well. — Anu, Jul 03 '20 at 12:04

Jonathan Applebaum · Accepted Answer · 2020-07-03T14:39:15.100

You can use 2 tables,
one for the left column, and the second for the rest of the columns to make this effect.

Demo: Freeze left column

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <style>
      .tbls-cont{
        display:block;
        background-color:green;
        overflow:auto;
        width:100%;
      }
      .lft{
        position:fixed;
        background-color:red;
        margin-right:5px;
        width:10%;
      }
      .rgt{
        width:90%;
        float:right;
      }
    </style>
  </head>
  <body>
    <div class='tbls-cont' id='main_cont'>
      <div class='lft' id='sub-cont-lft'>
        <table class="table table-hover static" id='left_tbl'>
          <thead>
            <tr>
              <th scope="col">#
              </th>
              <th scope="col">First
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">1
              </th>
              <td>Mark
              </td>
            </tr>
            <tr>
              <th scope="row">2
              </th>
              <td>Jacob
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class='rgt' id='sub-cont-rgt'>
        <table class="table table-hover" id='right_tbl'>
          <thead>
            <tr>
              <th scope="col">Last
              </th>
              <th scope="col">Handle
              </th>
              <th scope="col">Handle
              </th>
              <th scope="col">Handle
              </th>
              <th scope="col">Handle
              </th>
              <th scope="col">Handle
              </th>
              <th scope="col">Handle
              </th>
              <th scope="col">Handle
              </th>
              <th scope="col">Handle
              </th>
              <th scope="col">Handle
              </th>
              <th scope="col">Handle
              </th>
              <th scope="col">Handle
              </th>
              <th scope="col">Handle
              </th>
              <th scope="col">Handle
              </th>
              <th scope="col">Handle
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Otto
              </td>
              <td>@mdo
              </td>
              <td>@mdo
              </td>
              <td>@mdo
              </td>
              <td>@mdo
              </td>
              <td>@mdo
              </td>
              <td>@mdo
              </td>
              <td>@mdo
              </td>
              <td>@mdo
              </td>
              <td>@mdo
              </td>
              <td>@mdo
              </td>
              <td>@mdo
              </td>
              <td>@mdo
              </td>
              <td>@mdo
              </td>
              <td>@mdo
              </td>
            </tr>
            <tr>          
              <td>Thornton
              </td>
              <td>@fat
              </td>
              <td>@fat
              </td>
              <td>@fat
              </td>
              <td>@fat
              </td>
              <td>@fat
              </td>
              <td>@fat
              </td>
              <td>@fat
              </td>
              <td>@fat
              </td>
              <td>@fat
              </td>
              <td>@fat
              </td>
              <td>@fat
              </td>
              <td>@fat
              </td>
              <td>@fat
              </td>
              <td>@fat
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </body>
</html>

EDIT:

I think you need an external library, check this: github.com/yidas/jquery-freeze-table, I think it will solve your problem.

The problem with this is, when i do the vertical scrolling, respective data that we see will be wrong because the left pane will stay at fixed position — Anu, Jul 03 '20 at 12:00
you can see the problem here https://jsbin.com/gozifoqawi/edit?html,output — Anu, Jul 03 '20 at 12:13
@Anu yes, I see, wait and let me think of a solution for you, we probably need JS here, — Jonathan Applebaum, Jul 03 '20 at 13:29
Ok I think you need an external library, check this: https://github.com/yidas/jquery-freeze-table, I think it will solve your problem. — Jonathan Applebaum, Jul 03 '20 at 14:38
Thank you. This external library works well with the top and left pane freezing — Anu, Jul 07 '20 at 05:38

How to freeze the top and left of an HTML table at the same time

1 Answers1