Html 页眉和页脚内部的可滚动表体_Html_Css_Html Table_Scrollable

Html 页眉和页脚内部的可滚动表体

html css

Html 页眉和页脚内部的可滚动表体,html,css,html-table,scrollable,Html,Css,Html Table,Scrollable,我试图在一个页面上创建一个小部件，它是一个带有thead、tbody和tfoot的表。因为我不希望小部件变得太大，如果tbody因为有许多行而超过200px，我希望表中的行是可滚动的我正在使用jQuery1.9.1，但如果可能的话，我更喜欢纯CSS/HTML解决方案有人对此有非常简单的解决方案吗？您可以使用溢出css声明 <!DOCTYPE html> <html> <head> </head> <body> <div id

我试图在一个页面上创建一个小部件，它是一个带有thead、tbody和tfoot的表。因为我不希望小部件变得太大，如果tbody因为有许多行而超过200px，我希望表中的行是可滚动的

我正在使用jQuery1.9.1，但如果可能的话，我更喜欢纯CSS/HTML解决方案

有人对此有非常简单的解决方案吗？

您可以使用溢出css声明

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<div id="wrapper" style="height:100px;width:100px;overflow:auto;">
<div id="widget">

<table>
<tbody>
    <tr>
        <td>blah</td>
        <td>blah</td>
        <td>blah</td>
        <td>blah</td>
        <td>blah</td>
        <td>blah</td>   
    </tr>
    <tr>
        <td>more blah</td>
        <td>etc</td>
        <td>etc</td>
        <td>etc</td>
        <td>etc</td>
        <td>etc</td>    
    </tr>
    <tr>
        <td>blah</td>
        <td>blah</td>
        <td>blah</td>
        <td>blah</td>
        <td>blah</td>
        <td>blah</td>   
    </tr>
</tbody>
</table>

</div>


</div>




</body>
</html>


废话
废话
废话
废话
废话
废话
更多废话
等
等
等
等
等
废话
废话
废话
废话
废话
废话

问题是我只想滚动表的内容（“tbody”）。表的页眉和页脚（“thead”和“tfoot”）应该保持不变。您也可以向任何内容（包括tbody）添加相同的声明：）我尝试了以下css:table.scheduleWidget tbody{width:250px；height:30px；overflow:auto；}但奇怪的是，它根本不起任何作用：（可能还值得一提的是，如果我尝试像tbody{height:1000px}这样的东西，它不会增加桌子的高度。它完全忽略了高度。请你设置一个jsfiddle，这样我可以玩一玩，看看我能不能帮上忙？