3 replies [Last post]
qzee
Offline
newbie
Karachi
Last seen: 16 years 6 weeks ago
Karachi
Joined: 2003-06-08
Posts: 2
Points: 0

I want some help for table cell scrolling using css. need to accomplish the following.

1) the cell width auto
2) the cell height fixed
2) and crollable when resize the page size
3) having only verticql scrolling only

Can anyone help me for the having it done with CSS?
really need help....[/b]

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 4 days 2 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

overflow

Hi qzee,
You will run into cross browser difficulties here.
IE have their own overflow-y property which is not recognized by the World Wide Web Consortium so most other browser will just ignore it.

What you could try is to set overflow:scroll so other browsers will scroll both ways then after that specify overflow-x: hidden; overflow-y:scroll;

I would do this as the last thing in your stylesheet incase it causes some other browsers to ignore anything past it.

qzee
Offline
newbie
Karachi
Last seen: 16 years 6 weeks ago
Karachi
Joined: 2003-06-08
Posts: 2
Points: 0

Scrolling Cell data using CSS

Thank you Tony,
I would love to have a sample coding, coz i have been trying that but couldnt accomplish it...would you help me with the coding?

Thanks in Advance...

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 4 days 2 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Scrolling Cell data using CSS

Hi qzee,
Uhm, seems like I just about led you down the wrong path Shock
I just tried out my idea and found that although it works with divs, in tables the scroll will not show up.

Luckily I don't give up easily, if you put a div inside the td and set the overflow properties on that div you should get close to what your after.
You must set a width otherwise everything falls out sideways.

.sc{width:50px; height:50px; overflow:scroll; overflow-y: scroll; overflow-x:hidden;}

<table>
   <tr><td>
      <div class="sc"> lots of text here...</div>
   </td></tr>
</table>