Retain table layout while using block display for tbody - html

Question

I have a table with a scrollable tbody. The problem is for the scroll to work I set the display for the the tbody to block, this in turn messes up the table layout
<div align="center">
<table class="sampleTable">
<thead>
<tr>
<th class="centerAlign" colspan="3">
<b>HEADER</b>
</th>
</tr>
<tr>
<th class="centerAlign">COLUMN 1</th>
<th class="centerAlign">COLUMN 2</th>
<th class="centerAlign">COLUMN 3</th>
</tr>
</thead>
<tbody class="scroll">
<tr>
<td class="centerAlign">
DATA
</td>
<td class="centerAlign">
DATA
</td>
<td class="centerAlign">
DATA
</td>
</tr>
<tr>
<td class="centerAlign">
DATA
</td>
<td class="centerAlign">
DATA
</td>
<td class="centerAlign">
DATA
</td>
</tr>
<tr>
<td class="centerAlign">
DATA
</td>
<td class="centerAlign">
DATA
</td>
<td class="centerAlign">
DATA
</td>
</tr>
<tr>
<td class="centerAlign">
DATA
</td>
<td class="centerAlign">
DATA
</td>
<td class="centerAlign">
DATA
</td>
</tr>
<tr>
<td class="centerAlign">
DATA
</td>
<td class="centerAlign">
DATA
</td>
<td class="centerAlign">
DATA
</td>
</tr>
<tr>
<td class="centerAlign">
DATA
</td>
<td class="centerAlign">
DATA
</td>
<td class="centerAlign">
DATA
</td>
</tr>
<tr>
<td class="centerAlign">
DATA
</td>
<td class="centerAlign">
DATA
</td>
<td class="centerAlign">
DATA
</td>
</tr>
<tr>
<td class="centerAlign">
DATA
</td>
<td class="centerAlign">
DATA
</td>
<td class="centerAlign">
DATA
</td>
</tr>
<tr>
<td class="centerAlign">
DATA
</td>
<td class="centerAlign">
DATA
</td>
<td class="centerAlign">
DATA
</td>
</tr>
<tr>
<td class="centerAlign">
DATA
</td>
<td class="centerAlign">
DATA
</td>
<td class="centerAlign">
DATA
</td>
</tr>
<tr>
<td class="centerAlign">
DATA
</td>
<td class="centerAlign">
DATA
</td>
<td class="centerAlign">
DATA
</td>
</tr>
<tr>
<td class="centerAlign">
DATA
</td>
<td class="centerAlign">
DATA
</td>
<td class="centerAlign">
DATA
</td>
</tr>
</tbody>
</table>
</div>
And here's the css:
table {
border-collapse: collapse;
clear: both;
}
table.sampleTable {
border: 0;
width: 60%;
height: 90%;
}
td {
font-weight: normal;
font-family: arial;
font-size: 13px;
color: #222222;
line-height: 18px;
border-top: 1px solid #ebebeb;
border-right: 1px solid #ebebeb;
border-bottom: 1px solid #ebebeb;
}
td.centerAlign {
text-align: center;
}
th.centerAlign {
text-align: center;
}
/* Scrollable tbody. */
tbody.scroll {
overflow: scroll;
height: 100px;
width: 100%;
}
The table looks like this and does not scroll:
Now if I add 'display: block to the tbody.scroll class and to thead, it starts scrolling (as I want it to) but the layout gets messed up.
tbody.scroll {
overflow: scroll;
height: 100px;
width: 100%;
display: block;
}
thead {
display:block;
}
This is how it looks now.
Is it possible to have the tbody scroll, without disturbing the look and feel of the table otherwise ?

Answer 1

I found the solution. Adding width in viewports fixed it.
td.centerAlign {
text-align: center;
width: 100vw;
}
th.centerAlign {
width: 100vw;
text-align: center;
}

Answer 2

This is a example, this can help you : http://jsfiddle.net/a9Lave1x/4/
HTML :
<div class="fixed-table-container">
<div class="header-background">
</div>
<div class="fixed-table-container-inner">
<table cellspacing="0">
<thead>
<tr>
<th class="first">
<div class="th-inner">First</div>
</th>
<th class="second">
<div class="th-inner">Second</div>
</th>
<th class="third">
<div class="th-inner">Third</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>First</td>
<td>First</td>
<td>First</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
<tr>
<td>Last</td>
<td>Last</td>
<td>Last</td>
</tr>
</tbody>
</table>
</div>
</div>
CSS :
.header-background {
background-color: #D5ECFF;
height: 30px;
position: absolute;
top: 0px;
right: 0px;
left: 0px;
}
.fixed-table-container {
width: 50%;
height: 200px;
border: 1px solid #000;
margin: 10px auto;
background-color: #FFF;
position: relative;
padding-top: 30px;
}
.fixed-table-container-inner {
overflow-x: hidden;
overflow-y: auto;
height: 100%;
}
thead{
color:black;
}
.first .th-inner {
border-left: medium none;
padding-left: 6px;
}
.th-inner {
position: absolute;
top: 0px;
line-height: 30px;
text-align: left;
border-left: 1px solid #000;
padding-left: 5px;
margin-left: -5px;
}

Answer 3

What worked for me was I wrap the entire table with a div container
Set the max-height(or any height I assume) of the container
Set overflow(-x/y) to auto and it just magically worked.