Question

我需要一些帮助。我尝试了2天制作一个可滚动的桌子，我找不到解决方案。

我的表是：

<table width=100% style="margin:0 0 0 -1px; border-collapse:collapse;"> 

<thead>
    <tr>        
        <th ><input type="checkbox" id="select_all" /></th> 
        <c:forEach items="${grid.heads}" var="element">  
             <th><c:out value="${element.id}"/></th>           
        </c:forEach>  
    </tr>   
</thead>

<tbody style="height:200px !important;   overflow: auto; display:block;">       
  <nested:iterate id="row" name="grid" property="data" indexId="cnt">                                                                
       <tr> 
         <td><input type="checkbox" name="list_with_checkboxes" value=<c:out value="${row[0]}"/> ></td>
             <nested:iterate id="element" name="row">  
                      <td><c:out value="${element}"/> </td>
            </nested:iterate>
       </tr>
  </nested:iterate>        
</tbody>    

</table>

我的表格被正确渲染但我不能让tbody可滚动，因为我不知道为什么tbody有另一个高度然后200px。

有什么想法吗？非常感谢！

Answer 1

如何制作2个表，第一个表只包含thead

    <table>
    <thead>
 <th>HEADER</th>
    </thead>
    </table>

    <div style="height:200px !important; overflow:scroll;">
    <table>
    <tbody>
    </tbody>
    </table>
    </div>

Answer 2

似乎已有很多答案

Table tbody scroll in IE8

How can I let a table's body scroll but keep its head fixed in place?

<th style="width:0px;"></th>

这个现有的小提琴似乎可以解决它，但请查看上面链接中的其他建议 - http://jsfiddle.net/venkateshwar/X8FSw/17/show/

IE8中带有固定标题的表

2 个答案: