如何使用css冻结html表列 [英] how to freeze html table columns using css
本文介绍了如何使用css冻结html表列的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
你好，
以下是我的代码。如何冻结我的表格？
Hello There,
Below is my code. How can i freeze my table colums?
<pre lang="HTML"><table id="tblExtraHoursWorked" style="display: inline;" width="100%" border="1px"
cellspacing="0">
<thead style="removed:fixed; background-color: Green; color: White;">
<tr>
<td style="width: 15%; font-weight: bold; color: White; text-align: center">
Employee Code
</td>
<td style="width: 25%; font-weight: bold; color: White; text-align: center">
Name of the Employee
</td>
<td style="width: 25%; font-weight: bold; color: White" colspan="8">
<table class="gridColorHeader" width="100%" border="1px" cellspacing="0">
<tbody>
<tr>
<td colspan="8" align="center">
Last 2 Days ( Shift Wise )
</td>
</tr>
<tr>
<td colspan="4" align="center">
23-10-2014
</td>
<td colspan="4" align="center">
24-10-2014
</td>
</tr>
<tr>
<td style="width: 25px; text-align: center">
G
</td>
<td style="width: 25px; text-align: center">
A
</td>
<td style="width: 25px; text-align: center">
B
</td>
<td style="width: 25px; text-align: center">
C
</td>
<td style="width: 25px; text-align: center">
G
</td>
<td style="width: 25px; text-align: center">
A
</td>
<td style="width: 25px; text-align: center">
B
</td>
<td style="width: 25px; text-align: center">
C
</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 35%; font-weight: bold; color: White" colspan="12">
<table class="gridColorHeader" width="100%" border="1px" cellspacing="0">
<tbody>
<tr>
<td colspan="12" align="center">
Last 3 Days ( Shift Wise )
</td>
</tr>
<tr>
<td colspan="4" align="center">
25-10-2014
</td>
<td colspan="4" align="center">
26-10-2014
</td>
<td colspan="4" align="center">
27-10-2014
</td>
</tr>
<tr>
<td align="center">
G
</td>
<td align="center">
A
</td>
<td align="center">
B
</td>
<td align="center">
C
</td>
<td align="center">
G
</td>
<td align="center">
A
</td>
<td align="center">
B
</td>
<td align="center">
C
</td>
<td align="center">
G
</td>
<td align="center">
A
</td>
<td align="center">
B
</td>
<td align="center">
C
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</thead>
<tbody style="padding-removed1000px">
<tr style="background-color: white">
<td>
<span id="emp_code0" style="font-weight: normal">ONM_000671</span>
</td>
<td>
Anil Kumar
</td>
<td style="width: 25px; text-align: center">
0
</td>
<td style="width: 25px; text-align: center">
0
</td>
<td style="width: 25px; text-align: center">
0
</td>
<td style="width: 25px; text-align: center">
0
</td>
<td style="width: 25px; text-align: center">
0
</td>
<td style="width: 25px; text-align: center">
0
</td>
<td style="width: 25px; text-align: center">
0
</td>
<td style="width: 25px; text-align: center">
0
</td>
<td>
<input id="txtgen_Three0" class="EHW" readonly="readonly" placeholder="G" style="width: 25px;
border-color: brown; color: brown; text-align: center" maxlength="2" value="0"
type="text">
</td>
<td>
<input id="txtfirst_Three0" class="EHW" readonly="readonly" placeholder="A" style="width: 25px;
border-color: green; color: green; text-align: center" maxlength="2" value="0"
type="text">
</td>
<td>
<input id="txtsecond_Three0" class="EHW" readonly="readonly" placeholder="B" style="width: 25px;
border-color: orange; color: orange; text-align: center" maxlength="2" value="0"
type="text">
</td>
<td>
<input id="txtthrid_Three0" class="EHW" readonly="readonly" placeholder="C" style="width: 25px;
border-color: black; color: black; text-align: center" maxlength="2" value="0"
type="text">
</td>
<td>
<input id="txtgen_Four0" class="EHW" readonly="readonly" placeholder="G" style="width: 25px;
border-color: brown; color: brown; text-align: center" maxlength="2" value="0"
type="text">
</td>
<td>
<input id="txtfirst_Four0" class="EHW" readonly="readonly" placeholder="A" style="width: 25px;
border-color: green; color: green; text-align: center" maxlength="2" value="0"
type="text">
</td>
<td>
<input id="txtsecond_Four0" class="EHW" readonly="readonly" placeholder="B" style="width: 25px;
border-color: orange; color: orange; text-align: center" maxlength="2" value="0"
type="text">
</td>
<td>
<input id="txtthrid_Four0" class="EHW" readonly="readonly" placeholder="C" style="width: 25px;
border-color: black; color: black; text-align: center" maxlength="2" value="0"
type="text">
</td>
<td>
<input id="txtgen_Five0" class="EHW" placeholder="G" style="width: 25px; border-color: brown;
color: brown; text-align: center" maxlength="2" value="0" type="text">
</td>
<td>
<input id="txtfirst_Five0" class="EHW" placeholder="A" style="width: 25px; border-color: green;
color: green; text-align: center" maxlength="2" value="0" type="text">
</td>
<td>
<input id="txtsecond_Five0" placeholder="B" style="width: 25px; border-color: orange;
color: orange; text-align: center" class="EHW" maxlength="2" value="0" type="text">
</td>
<td>
<input id="txtthrid_Five0" class="EHW" placeholder="C" style="width: 25px; border-color: black;
color: black; text-align: center" maxlength="2" value="0" type="text">
</td>
</tr>
</tbody>
</table>
Regards,
K N R
Regards,
K N R
推荐答案
Unfortunately I have no the source of it, but only the link to JSFiddle...http://jsfiddle.net/emn13/YMvk9/[^]...
Of course it does not work in old (before 9) IE!
Unfortunately I have no the source of it, but only the link to JSFiddle...http://jsfiddle.net/emn13/YMvk9/[^]...
Of course it does not work in old (before 9) IE!
这篇关于如何使用css冻结html表列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
