Table with scroll(body)
table with scroll for table body
by Mr_Vasu
HTML
<table class="tableSection">
<thead>
<tr>
<th><span class="text">album</span>
</th>
<th><span class="text">song</span>
</th>
<th><span class="text">genre</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>album 0</td>
<td>song0</td>
<td>genre0</td>
</tr>
<tr>
<td>album 1</td>
<td>song 1</td>
<td>genre1</td>
</tr>
<tr>
<td>album2</td>
<td>song 2</td>
<td>genre2</td>
</tr>
<tr>
<td>album3</td>
<td>song 3</td>
<td>genre3</td>
</tr>
<tr>
<td>album4</td>
<td>song 4</td>
<td>genre 4</td>
</tr>
<tr>
<td>album5</td>
<td>song 5</td>
<td>genre 5</td>
</tr>
<tr>
<td>album 6</td>
<td>song6</td>
<td>genre6</td>
</tr>
<tr>
<td>album 7</td>
<td>song7</td>
<td>genre7</td>
</tr>
<tr>
<td>album8</td>
<td>song8</td>
<td>genre 8</td>
</tr>
<tr>
<td>album9</td>
<td>song9</td>
<td>genre9</td>
</tr>
<tr>
<td>album10</td>
<td>song 10</td>
<td>genre10</td>
</tr>
<tr>
<td>album11</td>
<td>song 11</td>
<td>genre11</td>
</tr>
<tr>
<td>album12</td>
<td>song12</td>
<td>genre12</td>
</tr>
<tr>
<td>album 13</td>
<td>song13</td>
<td>genre13</td>
</tr>
<tr>
<td>album14</td>
<td>song14</td>
<td>genre14</td>
</tr>
<tr>
...CSS
table.tableSection {
display: table;
width: 100%;
}
table.tableSection thead, table.tableSection tbody {
float: left;
width: 100%;
}
table.tableSection tbody {
overflow: auto;
height: 150px;
}
table.tableSection tr {
width: 100%;
display: table;
text-align: left;
}
table.tableSection th, table.tableSection td {
width: 33%;
}