我准备好了我想要的头。但我无法修复左侧的dable行。
我想在水平滚动时修正左边（带固定的名字）。
仅适用于水平滚动固定，不适用于垂直滚动。
我该怎么做？
这是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>
答案 0 :(得分：0)
这应该解决它：
position:fixed