CODEWITHSUNDEEP
htmlcss
vipin
vipin

Reputation: 678

HTML how to make each row of a table scrollable?

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.

Upvotes: 1

Views: 3560

Answers (5)

Subliminal Hash
Subliminal Hash

Reputation: 13740

<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/

Upvotes: 0

Richa
Richa

Reputation: 3289

Check this working demo FIDDLE

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

Upvotes: 2

Sudeep Gowda
Sudeep Gowda

Reputation: 1

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...

Upvotes: 0

Vivek Jain
Vivek Jain

Reputation: 3889

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

Upvotes: 0

Pradeep Pansari
Pradeep Pansari

Reputation: 1297

you can try overflow:scroll; in td

Upvotes: 0

Related Questions