如何制作具有固定标题的兼容可滚动表

Question

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

<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中使用。 两表概念也不起作用。

Answer 1

您是否考虑过使用jQgrid ？ 我强烈推荐它。 它可以在我尝试过的每种浏览器中使用，并增加了重要的功能。

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

您可以在此处查看它的运行情况。