如何用溢出滚动设置tbody高度

问题描述

我在设置tbody高度宽度溢出滚动时遇到问题。

 < style> 
 tbody {
 height：50px; display：block; overflow：scroll 
} 
< / style> 
 
< h3>表B< / h3> 
< table style =border：1px solid red; width：300px; display：block> 
< thead> 
< tr> 
< td>名称< / td> 
< td>电话< / 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> 
  

I am facing problem while setting tbody height width overflow scroll.

<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>

Visit my fiddle here

I want table B like Table A with overflow scroll.

Any help will be appreciated.

Many Thanks,M.

解决方案

if you want tbody to show a scroll , turn it into a block.

To keep behavior of table , turn tr into table.

to spray evenly the cells , use table-layout:fixed;

DEMO

---

CSS for your HTML test :

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;
}

---

If tbody doesn't show a scroll, because content is less than height or max-height, set the scroll anytime with : overflow-y:scroll;. DEMO 2

这篇关于如何用溢出滚动设置tbody高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！