HTML how to make each row of a table scrollable? - html

Question

I have a table, I want to give css "overflow:scroll" to each tr, but its not working. Here is my code.
HTML
<table>
<tr>
<td>hai</td>
<td>hellow</td>
<td>shcjbjs</td>
<td>dvkd</td>
</tr>
<tr>
<td>hai</td>
<td>hellow</td>
<td>shcjbjs</td>
<td>dvkd</td>
</tr>
<tr>
<td>hai</td>
<td>hellow</td>
<td>shcjbjs</td>
<td>dvkd</td>
</tr>
<tr>
<td>hai</td>
<td>hellow</td>
<td>shcjbjs</td>
<td>dvkd</td>
</tr>
</table>
CSS
table{
border:1px solid red;
}
td{
border:1px solid blue;
height:100px;
}
tr{
height:50px;
overflow-y:scroll;
}
I have made a fiddle with the example please give me a solution.

Answer 1

Check this working demo FIDDLE
table{
border:1px solid red;
}
td{
border:1px solid blue;
height:100px;
}
tr{
height:50px;
overflow:scroll;
display:block;
}

Answer 2

you can try overflow:scroll; in td

Answer 3

You may try CSS properties:
overflow: scroll;
or
overflow: auto;
Similarly, you may also use:
`overflow-y` if you want only a vertical scroll or
`overflow-x` if you want only a horizontal scroll
Do set a height for the row and check browser compatibility for all these CSS properties.
Use a set of div instead of a table for better results

Answer 4

table{
border:1px solid red;
}
td{
border:1px solid blue;
height:100px;
}
tr{
height:50px;
overflow:scroll;
display:block;
}
this might help, but i am not sure if this is any way of treating the table...

Answer 5

<tr>
<td>your long content here</td>
</tr>
css:
tr{
height:50px;
display:block;
overflow-y:auto;overflow-x: hidden;
}
FIDDLE http://jsfiddle.net/kemalemin/E2r2W/7/