CODEWITHSUNDEEP
htmlscrollbar
StarbuckM
StarbuckM

Reputation: 1

Scrollbar ONLY in one TD cell in a table?

I'm creating a new layout for my site and I'm starting with tables. Currently I've got a fairly simple code for my tables and you can see it here: (http://www.thelanternlight.com/misc/new01.html)

I'm trying to have NO scrollbars on the entire page but rather ONLY a vertical scrollbar in ONLY the teal cell you see on that page (the one with lowright written in it). That is where my content will be.

The main issue I'm facing is that I don't want to provide dimensions for my table or its cells because I want to use 100% for width and height so that it covers the entire page no matter what browser settings the user has. If at all possible I just want to add an overflow scrollbar to that teal TD cell alone.

I'll also provide the code I have currently:

<table style="width:100%" height="100%" bgcolor="pink" cellspacing=0 cellpadding=0 class="alignment">
  <tr>
    <td align="left" bgcolor="red" colspan="2" height="150">topleft</td>
    <td align="right" bgcolor="yellow">topright</td>
  </tr>
  <tr>
    <td align="left" bgcolor="magenta" width="100">lowleft</td>
    <td align="center" bgcolor="blueviolet" width="100">lowcenter</td>
    <td align="center" bgcolor="teal">
      <div style="overflow-y:scroll; overflow-y:auto; width:100%">lowright &nbsp;
        <p>


      </div>
    </td>
  </tr>
</table>

Upvotes: 0

Views: 562

Answers (2)

Ruan
Ruan

Reputation: 17

<table style="width:100%" height="100%" bgcolor="pink" cellspacing=0 cellpadding=0 class="alignment">
  <tr>
    <td align="left" bgcolor="red" colspan="2" height="150">topleft</td>
    <td align="right" bgcolor="yellow">topright</td>
  </tr>
  <tr>
    <td align="left" bgcolor="magenta" width="100">lowleft</td>
    <td align="center" bgcolor="blueviolet" width="100">lowcenter</td>
    <td align="center" bgcolor="teal">
      <div style="overflow-y:scroll;  width:100%">lowright &nbsp;
        <p>
      </div>
    </td>
  </tr>
</table>

<div style="overflow-y:scroll; width:100%">lowright Body overflow-y: hidden;

I put the overflow-y: hidden in the body and overflow-y:scroll in the div

Try it

Upvotes: 0

Rob Moll
Rob Moll

Reputation: 3453

Give that cell a height or it will keep growing as content is added never triggering the scroll:

<table style="width:100%" height="100%" bgcolor="pink" cellspacing=0 cellpadding=0 class="alignment">
<tr>
<td align="left" bgcolor="red" colspan="2" height="150">topleft</td>
<td align="right" bgcolor="yellow">topright</td>
</tr>
<tr>
<td align="left" bgcolor="magenta" width="100">lowleft</td>
<td align="center" bgcolor="blueviolet" width="100">lowcenter</td>
<td align="center" bgcolor="teal"><div style="overflow-y:auto;
  height: 100px; width:100%">lowright
&nbsp;
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan eleifend enim, nec vestibulum risus dignissim sit amet. In hac habitasse platea dictumst. Maecenas at enim eu magna laoreet rhoncus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus ac pellentesque enim, at pulvinar orci. Phasellus quis vestibulum nunc. Etiam mattis nulla orci. Donec elementum odio lacus, quis tempus ante eleifend sit amet. Nam congue ut dui vitae eleifend.

Nulla convallis consectetur diam vitae pulvinar. Nam varius hendrerit rutrum. Quisque finibus mattis turpis at dignissim. Praesent hendrerit libero lacinia nibh sodales pretium. Etiam in massa lacinia, posuere lectus non, efficitur nisl. Donec ut turpis vel lectus consequat ornare non molestie nulla. Sed at ante id diam laoreet facilisis vitae et nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nunc pulvinar, enim vitae hendrerit tincidunt, nibh libero egestas velit, mattis volutpat ante purus et nisi. Mauris feugiat, massa aliquet venenatis semper, ante lectus tempor orci, at tristique leo metus id magna. Sed vestibulum blandit orci, non facilisis felis mollis vel. Donec auctor tincidunt hendrerit. Donec sodales mollis consectetur. Nulla eget tristique felis, eget scelerisque massa. Aliquam nisi mi, feugiat eu ligula quis, dictum varius turpis. Praesent sed leo a dolor egestas rutrum vitae nec diam.
  </p>

</div>
</td>
</tr>
</table>

Upvotes: 2

Related Questions