Maverick Maverick - 3 months ago 141
CSS Question

How to set tbody height with overflow scroll

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.

Answer

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


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

Comments