如何使用溢出滚动设置tbody高度
我在设置tbody高度宽度溢出滚动时遇到问题。
<style> tbody{ height:50px;display:block;overflow:scroll } </style> <h3>Table B</h3> <table style="border: 1px solid red;width:300px;display:block"> <thead> <tr> <td>Name</td> <td>phone</td> </tr> </thead> <tbody style='height:50px;display:block;overflow:scroll'> <tr> <td>AAAA</td> <td>323232</td> </tr> <tr> <td>BBBBB</td> <td>323232</td> </tr> <tr> <td>CCCCC</td> <td>3435656</td> </tr> </tbody> </table> 在这里看我的小提琴
我想表B与表A溢出滚动。
任何帮助将不胜感激。
非常感谢，M.
如果你想要显示滚动，把它变成一个block 。
为了保持table行为，把tr转换成table 。
将细胞均匀地喷洒，使用table-layout:fixed;
DEMO 
你的HTMLtesting的CSS：
table ,tr td{ border:1px solid red } tbody { display:block; height:50px; overflow:auto; } thead, tbody tr { display:table; width:100%; table-layout:fixed;/* even columns width , fix width of table too*/ } thead { width: calc( 100% - 1em )/* scrollbar is average 1em/16px width, remove it from thead width */ } table { width:400px; }
如果tbody不显示滚动，因为内容小于height或max-height ，可以随时用scroll overflow-y:scroll; 。 DEMO 2
滚动条到表格主体是一种简单的方法
/* It is simple way to use scroll bar to table body*/ .tableBodyScroll tbody { display:block; max-height:300px; overflow-y:scroll; } .tableBodyScroll thead, tbody tr { display:table; width:100%; table-layout:fixed; }
<table class="tableBodyScroll" > <thead> <th>Invoice Number</th> <th>Purchaser</th> <th>Invoice Amount</th> <th>Invoice Date</th> </thead> <tbody> <tr > <td>INV-1233</td> <td>Dinesh Vaitage</td> <td>$300</td> <td>01/12/2017</td> </tr> <tr > <td>INV-1233</td> <td>Dinesh Vaitage</td> <td>$300</td> <td>01/12/2017</td> </tr> <tr > <td>INV-1233</td> <td>Dinesh Vaitage</td> <td>$300</td> <td>01/12/2017</td> </tr> <tr > <td>INV-1233</td> <td>Dinesh Vaitage</td> <td>$300</td> <td>01/12/2017</td> </tr> <tr > <td>INV-1233</td> <td>Dinesh Vaitage</td> <td>$300</td> <td>01/12/2017</td> </tr> <tr > <td>INV-1233</td> <td>Dinesh Vaitage</td> <td>$300</td> <td>01/12/2017</td> </tr> <tr > <td>INV-1233</td> <td>Dinesh Vaitage</td> <td>$300</td> <td>01/12/2017</td> </tr> <tr > <td>INV-1233</td> <td>Dinesh Vaitage</td> <td>$300</td> <td>01/12/2017</td> </tr> <tr > <td>INV-1233</td> <td>Dinesh Vaitage</td> <td>$300</td> <td>01/12/2017</td> </tr> <tr > <td>INV-1233</td> <td>Dinesh Vaitage</td> <td>$300</td> <td>01/12/2017</td> </tr> <tr > <td>INV-1233</td> <td>Dinesh Vaitage</td> <td>$300</td> <td>01/12/2017</td> </tr> <tr > <td>INV-1233</td> <td>Dinesh Vaitage</td> <td>$300</td> <td>01/12/2017</td> </tr> <tr > <td>INV-1233</td> <td>Dinesh Vaitage</td> <td>$300</td> <td>01/12/2017</td> </tr> <tr > <td>INV-1233</td> <td>Dinesh Vaitage</td> <td>$300</td> <td>01/12/2017</td> </tr> <tr > <td>INV-1233</td> <td>Dinesh Vaitage</td> <td>$300</td> <td>01/12/2017</td> </tr> <tr > <td>INV-1233</td> <td>Dinesh Vaitage</td> <td>$300</td> <td>01/12/2017</td> </tr> <tr > <td>INV-1233</td> <td>Dinesh Vaitage</td> <td>$300</td> <td>01/12/2017</td> </tr> <tr > <td>INV-1233</td> <td>Dinesh Vaitage</td> <td>$300</td> <td>01/12/2017</td> </tr> </tbody> </table>
默认情况下， overflow不适用于表格组元素，除非您给display:block <tbody>也必须给position:relative和display: block到<thead> 。 检查演示 。
.fixed { width:350px; table-layout: fixed; border-collapse: collapse; } .fixed th { text-decoration: underline; } .fixed th, .fixed td { padding: 5px; text-align: left; min-width: 200px; } .fixed thead { background-color: red; color: #fdfdfd; } .fixed thead tr { display: block; position: relative; } .fixed tbody { display: block; overflow: auto; width: 100%; height: 100px; overflow-y: scroll; overflow-x: hidden; }
改变你的第二个表格，如下所示。
<table style="border: 1px solid red;width:300px;display:block;"> <thead> <tr> <td width=150>Name</td> <td width=150>phone</td> </tr> </thead> <tbody style='height:50px;overflow:auto;display:block;width:317px;'> <tr> <td width=150>AAAA</td> <td width=150>323232</td> </tr> <tr> <td>BBBBB</td> <td>323232</td> </tr> <tr> <td>CCCCC</td> <td>3435656</td> </tr> </tbody> </table>
JSFIDDLE DEMO
我想你要做的是保持头部固定，并滚动正文的内容。 您可以将内容滚动到2个方向：
- 水平方向：除非使用滑块（例如jQuery滑块），否则将无法水平滚动内容。 我build议避免在这种情况下使用表格。
- 垂直方向：因为分配
display:block或display:inline-block会破坏表格的布局，所以你不能用tbody标签来实现。
这是一个使用divs的解决scheme： JSFiddle
HTML：
<div class="wrap_header"> <div class="column"> Name </div> <div class="column"> Phone </div> <div class="clearfix"></div> </div> <div class="wrap_body"> <div class="sliding_wrapper"> <div class="serie"> <div class="cell"> AAAAAA </div> <div class="cell"> 323232 </div> <div class="clearfix"></div> </div> <div class="serie"> <div class="cell"> BBBBBB </div> <div class="cell"> 323232 </div> <div class="clearfix"></div> </div> <div class="serie"> <div class="cell"> CCCCCC </div> <div class="cell"> 3435656 </div> <div class="clearfix"></div> </div> </div> </div>
CSS：
.wrap_header{width:204px;} .sliding_wrapper, .wrap_body {width:221px;} .sliding_wrapper {overflow-y:scroll; overflow-x:none;} .sliding_wrapper, .wrap_body {height:45px;} .wrap_header, .wrap_body {overflow:hidden;} .column {width:100px; float:left; border:1px solid red;} .cell {width:100px; float:left; border:1px solid red;} /** * @info Clearfix: clear all the floated elements */ .clearfix:after { visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0; } .clearfix {display:inline-table;} /** * @hack Display the Clearfix as a block element * @hackfor Every browser except IE for Macintosh */ /* Hides from IE-mac \*/ * html .clearfix {height:1%;} .clearfix {display:block;} /* End hide from IE-mac */
说明：
你有一个sliding wrapper将包含所有的数据。
请注意以下几点：
.wrap_header{width:204px;} .sliding_wrapper, .wrap_body {width:221px;}
有17px的差异，因为我们需要考虑滚动条的宽度。
