0

I all ready fixed head as I want. But I can't fixed the left dable row.

I want to fixed left th (name with Fixed) when horizontally scrolling.

only for horizontally scrolling fixed not for vertical scrolling.

how can I make it ?

here is the css

    th.text_center {
        text-align: center;
    }
 

   th.rotate {
  /* Something you can count on */
  height: 180px;
  white-space: nowrap;
}

 table {
        font-size: 12px;
    font-weight: 100;
    margin: 0 auto;
    width: 130%;
    font-family: sans-serif;
    letter-spacing: 1px;
     table-layout: fixed; 
}

th.rotate > div {
        transform: /* Magic Numbers */ translate(0px, 78px) /* 45 is really 360 - 45 */ rotate(-90deg);
    width: 20px;
}
th.rotate > div > span { 
  padding: 5px 10px;
}
table thead {
    display: inherit;
     width: 900px;
}

 


table  tbody{
    position: relative;
  display:block;
    width: 900px;
     height:200px;
  overflow:auto;//set tbody to auto
}
        table tbody tr th{
        
    }
 

here is the html
<h3 style="text-align: center">SONARGAON UNIVERSITY</h3>
<span><center>147/1 GREEN ROAD, TEJGAON DHAKA-1215<br><b>SALARY SHEET FOR THE MONTH OF JANUARY-2017</b></center></span>

<table style="border-collapse: collapse;" border="1">
    <thead>
        <tr>
        <th class="rotate" rowspan="2"><div><span>SL</span></div></th> 
        <th class="rotate" rowspan="2"><div><span>ID/Card No</span></div></th> 
        <th class="rotate" rowspan="2"><div><span>Name</span></div></th> 
        <th class="rotate" rowspan="2"><div><span> Designation</span></div></th> 
        <th class="rotate" rowspan="2"><div><span>Dept/Dev</span></div></th> 
        <th class="rotate" rowspan="2"><div><span>Date of Joining</span></div></th> 
        <th class="rotate" rowspan="2"><div><span>Campus</span></div></th> 
        <th colspan="14" class="text_center">Attendance Details</th> 
        <th colspan="11" class="text_center">Pay and Allowances</th> 
        <th colspan="5" class="text_center">Extra Duty</th> 
        <th colspan="6" class="text_center">Deduction</th> 
        <th class="rotate" rowspan="2"><div><span>Net Pay</span></div></th> 
        <th class="rotate" rowspan="2"><div><span>Stamp & Signature</span></div></th> 
        <th class="rotate" rowspan="2"><div><span>Remarks</span></div></th> 
    </tr>
    <tr> 
        <div class="oo">
        <th class="rotate"><div><span>Days of Month</span></div></th> 
        <th class="rotate"><div><span>Days of Attendance</span></div></th> 
        <th class="rotate"><div><span>Weekends</span></div></th> 
        <th class="rotate"><div><span>Govt. Holidays</span></div></th> 
        <th class="rotate"><div><span>Festival Holidays</span></div></th> 
        <th class="rotate"><div><span>Institutional Holidays</span></div></th> 
        <th class="rotate"><div><span>Absent</span></div></th> 
        <th class="rotate"><div><span>Quarantine</span></div></th> 
        <th class="rotate"><div><span>Study</span></div></th> 
        <th class="rotate"><div><span>Total Payable Days</span></div></th> 
        <th class="rotate"><div><span>Basic</span></div></th> 
        <th class="rotate"><div><span>H/R</span></div></th> 
        <th class="rotate"><div><span>Conveyance</span></div></th> 
        <th class="rotate"><div><span>Medical</span></div></th> 
        <th class="rotate"><div><span>Dearness</span></div></th> 
        <th class="rotate"><div><span>Consilated</span></div></th> 
        <th class="rotate"><div><span>Eid Festival</span></div></th> 
        <th class="rotate"><div><span>Boishakh Festival</span></div></th> 
        <th class="rotate"><div><span>Arrear</span></div></th> 
        <th class="rotate"><div><span>Others</span></div></th> 
        <th class="rotate"><div><span>Total</span></div></th> 
        <th class="rotate"><div><span>Gross</span></div></th> 
        <th class="rotate"><div><span>Basic</span></div></th> 
        <th class="rotate"><div><span>Slab</span></div></th> 
        <th class="rotate"><div><span>Fixed</span></div></th> 
        <th class="rotate"><div><span>Gross Total</span></div></th> 
        <th class="rotate"><div><span>Income Tax</span></div></th> 
        <th class="rotate"><div><span>GPF/CPF</span></div></th> 
        <th class="rotate"><div><span>Loan</span></div></th> 
        <th class="rotate"><div><span>Loan Against GPF</span></div></th> 
        <th class="rotate"><div><span>Advance</span></div></th> 
        <th class="rotate"><div><span>Absent</span></div></th> 
        <th class="rotate"><div><span>Over Drawn</span></div></th> 
        <th class="rotate"><div><span>Others</span></div></th> 
        <th class="rotate"><div><span>Stamp</span></div></th> 
        <th class="rotate"><div><span>Total</span></div></th> 
        </div>
    </tr>
    </thead>
        <tr>
            <th>fixed</th>
            <th>fixed</th>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td> 
            
         
        </tr> 
    <tr>
            <th>fixed</th>
            <th>fixed</th>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td> 
            
         
        </tr>
    <tr>
            <th>fixed</th>
            <th>fixed</th>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td> 
            
         
        </tr>
    <tr>
            <th>fixed</th>
            <th>fixed</th>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td> 
            
         
        </tr>
    <tr>
            <th>fixed</th>
            <th>fixed</th>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td> 
            
         
        </tr>
    <tr>
            <th>fixed</th>
            <th>fixed</th>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td> 
            
         
        </tr>
    <tr>
            <th>fixed</th>
            <th>fixed</th>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td> 
            
         
        </tr>
    <tr>
            <th>fixed</th>
            <th>fixed</th>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td>
            <td>bla bla bla</td> 
            
         
        </tr>
</table>
Sultan Mahmud
  • 19
  • 7
  • http://stackoverflow.com/questions/3402295/html-table-with-horizontal-scrolling-first-column-fixed – Shital Marakana Apr 26 '17 at 10:13
  • what is that div doing in betwween tr and th ? do you know about writing-mode ? http://stackoverflow.com/questions/42472962/css-rotation-text-only-inside-th-tag/42473231#42473231 see: https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode – G-Cyrillus Apr 26 '17 at 10:43
  • If it was not still buggy (because of table-layout) it could be (hoppefully will be) here is the basic CSS needed https://codepen.io/anon/pen/YVpBmy (writing-mode + position:sticky; – G-Cyrillus Apr 26 '17 at 11:28

1 Answers1

0

This should fix it:

position:fixed
Aurasphere
  • 3,841
  • 12
  • 44
  • 71
  • no. it's not. I want to like this. please check link https://datatables.net/extensions/fixedcolumns/examples/initialisation/left_right_columns.html – Sultan Mahmud Apr 26 '17 at 10:40
  • It is not Possible in css you can use Some type of plugin –  May 02 '17 at 06:38
  • http://www.jqueryscript.net/demo/jQuery-Plugin-For-Fixed-Table-Header-Footer-Columns-TableHeadFixer/examples/fixHeadAndLeft.html this will help you –  May 02 '17 at 06:38
  • http://www.jqueryscript.net/demo/jQuery-Plugin-For-Fixed-Table-Header-Footer-Columns-TableHeadFixer/ –  May 02 '17 at 06:40