Help with table data overflowing outside it's containing div

[Darkmatter5]

Here's my code

<div id='roundedBox' class='roundedBox' style='float: right; width: 200px; padding: 0 1em 0 1em; max-height: 200px;'>
  <table width='100%' height='100%' cellpadding='2' cellspacing='0' border='0' style='table-layout: fixed;'>
    <tr><th style='border-bottom: 2px groove #F0FFF0;'>CHARACTER SHEET HELP </th></tr>
    <tr valign='top'><td style='overflow-y: auto;'>                      
      <ol>Acronyms
        <li>Str: Strength</li>
        <li>Dex: Dexterity</li>
        <li>Con: Constitution</li>
        <li>Int: Intelligence</li>
        <li>Wis: Wisdom</li>
        <li>Cha: Charisma</li>
        <li>Mod: Modifier</li>
        <li>Equip: Equipment</li>
        <li>Equip: Equipment</li>
        <li>Equip: Equipment</li>
        <li>Equip: Equipment</li>
        <li>Equip: Equipment</li>
        <li>Equip: Equipment</li>
        <li>Equip: Equipment</li>
        <li>Equip: Equipment</li>
        <li>Equip: Equipment</li>
        <li>Equip: Equipment</li>
        <li>Equip: Equipment</li>
        <li>Equip: Equipment</li>
      </ol>
    </td></tr>
  </table>
  <div class='corner topLeft'></div>
  <div class='corner topRight'></div>
  <div class='corner bottomLeft'></div>
  <div class='corner bottomRight'></div>
</div>

 

Thanks in advance!

 

[attachment deleted by admin]

[haku]

<div id='roundedBox' class='roundedBox' style='float: right; width: 200px; padding: 0 1em 0 1em; max-height: 200px;'>

 

Either remove max-height:200px from the above, or try adding overflow-y:scroll.

[Darkmatter5]

Removing max-height makes the div grow as new contents is added, I need it fixed to grow no more then 200.  Adding overflow-y: scroll to the div produces a scroll bar, but I need the scroll bar to be in the <td> tag of the table, not the div.

 

Attached is a screen of the following code

"<div id='roundedBox' class='roundedBox' style='float: right; width: 200px; padding: 0 1em 0 1em; overflow-y: scroll;'>"

 

How can I only scroll within the <td>?

 

[attachment deleted by admin]

[Darkmatter5]

I got it working with this code:

 

<div id='roundedBox' class='roundedBox' style='float: right; width: 200px; padding: 0 1em 0 1em;'>
  <table width='100%' height='100%' cellpadding='2' cellspacing='0' border='0'>
    <tr><th style='border-bottom: 2px groove #F0FFF0;'>CHARACTER SHEET HELP </th></tr>
    <tr valign='top'><td height='200'>
      <div style='overflow-y: auto; height: 200px;'>
      <b>Acronyms</b>
      <ol>
        <li>Bon = Bonus</li>
        <li>Cha = Charisma</li>
        <li>Con = Constitution</li>
        <li>Dex = Dexterity</li>
        <li>Equip = Equipment</li>
        <li>Int = Intelligence</li>
        <li>Misc = Miscellaneous</li>
        <li>Mod = Modifier</li>
        <li>Pen = Penalty</li>
        <li>Str = Strength</li>
        <li>Wis = Wisdom</li>
        <li>Wis = Wisdom</li>
        <li>Wis = Wisdom</li>
        <li>Wis = Wisdom</li>
        <li>Wis = Wisdom</li>
        <li>Wis = Wisdom</li>
        <li>Wis = Wisdom</li>
        <li>Wis = Wisdom</li>
        <li>Wis = Wisdom</li>
        <li>Wis = Wisdom</li>
      </ol>
      </div>
    </td></tr>
  </table>
  <div class='corner topLeft'></div>
  <div class='corner topRight'></div>
  <div class='corner bottomLeft'></div>
  <div class='corner bottomRight'></div>
</div>