如何使用固定标头创建兼容的可滚动表

时间:2012-11-09 13:31:31

标签: javascript jquery html css

我需要在下表中修复标题。

    

<thead>
    <tr >

<td>tjj</td>
    <td>Marketing Phjgjgh </td>
<td>Mhjgjg Program Description </td>
    <td>Markjghjghgram type </td>
<td>CRM CjgjgjFlag </td>
<td>Brajghjjative </td>
<td>Marketijhgjhm Brand </td>
<td>Acjhgjting Program </td>

<td>CRMjgjhype</td>
    <td>Sweejghjhkes</td>
<td>Oldgjjgjivity Bypass</td>

</tr>
</thead>


    <tbody>
    <tr class="alternate1">
<td align="center"></td>
<td>EShjgjARDI</td>
<td>eShojghjmports</td>
<td>4 - Datajgjgjg or gjghjCapture</td>
<td>Y</td>
<td>38 jgjhards</td>
<td>00 jghjhporate</td>
<td>jh</td>
<td>jh</td>
<td>jgh</td>
<td>ghjhg</td>
</tr>

---SNIP-just more rows---

我尝试了很多解决方案,但它们只适用于某些浏览器。例如,

thead tr{
position:relative;
top: expression(offsetParent.scrollTop);
}

<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">使其仅在IE中有效。双表概念也不起作用。

1 个答案:

答案 0 :(得分:1)

您是否考虑过使用jQgrid?我强烈推荐它。它适用于我曾尝试过的每个浏览器,并增加了重要的功能。

如果您不想这样做,您可能想要采用他们的渲染方法。他们有一个表头和另一个表头。这种方法的最大障碍是让列匹配宽度,但是它们的方法效果很好,您可以根据需要调整整个结果的大小。

您可以在行动here中看到它。