Demo
<div id="divScroll" style="overflow-x: hidden">
<table id="tableAppointment" bgcolor="#fcfcfc" border="1" cellspacing="1" width="100%">
<tr>
<td class="csstextheader" width="70px"></td>
<td class="csstextheader" width="70px">
<b>Time Slot </b>
</td>
<td><b>Room 7</b></td>
<td><b>Room 8</b></td>
<td><b>Room 9</b></td>
<td><b>Room 10</b></td>
</tr>
<tr class="csstablelisttd">
<td width="70px">08:00AM</td>
<td>00</td>
<td class="csstdred">John</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
在窗口上调用onload
function resolutionIndependent()
{
var height;
var tableMain;
var divScroll;
if (document.body && document.body.offsetWidth)
{
height = document.body.offsetHeight;
}
if (document.compatMode == 'CSS1Compat' && document.documentElement && document.documentElement.offsetWidth)
{
height = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight)
{
height = window.innerHeight;
}
tableMain = document.getElementById('tableMain');
divScroll = document.getElementById('divScroll');
tableMain.style.height = parseFloat(height - 170) + 'px';
divScroll.style.height = parseFloat(height - 170) + 'px';
divScroll.style.overflow = "auto";
}
//***tableMain which is outer table of divScroll***
我必须制作第一行的固定标题..
我将style =“position：fixed”添加到第一行的每个单元格.但没有得到输出
..怎么可能
解决方法
嘿,你甚至可以使用一个简单的jquery函数,它可以在不改变你的HTML代码的情况下为你提供结果
var tdWidth = $("#tableAppointment tbody tr td").width();
$("#tableAppointment thead").css({'position': 'fixed','top': '0','left': '-0.2%','background-color': '#f94d4d','color': '#FFFFFF','text-align': 'center','width': '100%'});
$("#tableAppointment thead tr th").width(tdWidth);
工作示例是jsfiddle
