freeze top column and left row

Question

I am working on a project and I need to freeze the first column and the first row in a table while scrolling both vertically and horizontally. So far I have only been able to do it freeze the top row. It would be great if there is some pure HTML CSS solution but I am open to javascript on any plugin that will work with angular 5 Thanks in Advance.

Answer 1

I had the same problems when I coded for dashboard website. I googled it. There are quite a few solutions on the Internet. Here I give the simplest one, which only needs HTML, CSS, and Jquery. The key point to solve this problem is using <div> tag and the absolute position.

The picture below shows how to solve the problems.

3 Steps to create the Table with fixed Row and Column

1.create the table

<div class="green">
        <table>
            <thead>
                <tr>
                    <th class="width_200">No</th>
                    <th class="width_200">Name</th>
                    <th class="width_200">Class</th>
                    <th class="width_200">Teacher</th>
                    <th class="width_200">School</th>
                    <th class="width_200">Birthday</th>
                </tr>
            </thead>
        </table>
    </div>

2. Layout each div in their correct position

.outer {
  position: relative;
  overflow: hidden;
  }
 
 .green {
  overflow: hidden;
 }
  
  .orange {
  overflow: scroll;
  position: relative;
 }
  
  .blue {
  position: absolute;
  top: 50px;
 }
 
 .red {
  position: absolute;
  top: 0;
 }
 

3. Simple JQuery to do the animation part

var tb=$('.outer');
 var tbLeft=tb.children('.blue');
 var tbTop=tb.children('.green');
 var tbMain=tb.children('.orange');

    var leftTop = parseInt(tbLeft.css('top'));
    tbMain.scroll(function() {  
        tbLeft.css('top',leftTop - tbMain.scrollTop()+'px');
        tbTop.scrollLeft(tbMain.scrollLeft());
    });