Can any one show to scroll a table horizontally and vertically [Resolved]

Posted by Tsurendra690-29180 under HTML 5 on 1/17/2017 | Points: 10 | Views : 382 | Status : [Member] | Replies : 2
Please explain with code, Can any one show to scroll a table horizontally and vertically




Responses

Posted by: A2H on: 1/17/2017 [Member] [MVP] Silver | Points: 50

Up
0
Down

Resolved
You can make use of css scroll properlty to add scrollbar in table like below
Change the width and height as per your design
.scrolltable {
overflow:scroll;
height:150px;
width:130px
}


Sample Code


<table id="table1" table border="1">
<thead>
<tr>
<th>Sample 1</th>
<th>Sample 2</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">
<div class="scrolltable">
<table>
<tr>
<td>Sample 1</td>
<td>Sample 1</td>
</tr>
<tr>
<td>Sample 2</td>
<td>Sample 2 Thisdsdfasdfs is sample data</td>
</tr>
<tr>
<td>Sample 3</td>
<td>Sample 3</td>
</tr>
<tr>
<td>Sample 4</td>
<td>Sample 4</td>
</tr>
<tr>
<td>Sample 5</td>
<td>Sample 5</td>
</tr>
<tr>
<td>Sample 6</td>
<td>Sample 6</td>
</tr>
<tr>
<td>Sample 7</td>
<td>Sample 7</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>


Sample Working demo

http://jsbin.com/vivaposeni/edit?html,css,output

Thanks,
A2H
My Blog

Tsurendra690-29180, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Bulksmscbe on: 2/4/2017 [Member] Starter | Points: 25

Up
0
Down
HY WELCOME

scroll table horizontally and vertically using this coding.




<table>

<thead>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
<th>Head 4</th>
<th>Head 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr>
</tbody>
</table>
CSS:

table {
width: 100%;
display:block;
}
thead {
display: inline-block;
width: 100%;
height: 20px;
}
tbody {
height: 200px;
display: inline-block;
width: 100%;
overflow: auto;
}


Thanks
bulksms

Tsurendra690-29180, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response