如何使表格行固定在左侧[重复]答案

【问题标题】：How to make table row fixed at the left [duplicate]如何使表格行固定在左侧[重复]
【发布时间】：2017-09-23 15:03:09
【问题描述】：

我都准备好了固定头。但我无法修复左边的 dable 行。

我想在水平滚动时固定左侧（名称为 Fixed）。

仅适用于水平滚动，固定不适用于垂直滚动。

我该怎么做？

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

【问题讨论】：

stackoverflow.com/questions/3402295/…
那个 div 在 tr 和 th 之间做了什么？你知道写作模式吗？ stackoverflow.com/questions/42472962/… 见：developer.mozilla.org/en-US/docs/Web/CSS/writing-mode
如果它还不是错误的（因为表格布局）它可能是（希望会）这里是所需的基本 CSS codepen.io/anon/pen/YVpBmy (writing-mode + position:sticky;

标签： javascript jquery html css

【解决方案1】：

这应该可以解决它：

position:fixed

【讨论】：

没有。它不是。我想喜欢这个。请查看链接datatables.net/extensions/fixedcolumns/examples/initialisation/…
在css中不可能使用某种类型的插件
jqueryscript.net/demo/… 这会帮助你
jqueryscript.net/demo/…