Hello...We are new here and we apologize if we overlooked this question but we are having difficulty with our site layout. We are attempting to create a scrollbar in our table so that everything inside doesn't take up the whole site and also so that we don't have to create multiple pages and take up space.

If you could help, please let us know.. Thank you for your time :) (code below) Please let us know how we could integrate a scrollbar so that the information within the table doesn't take up space etc as we described above. Thank you SO much!

<style type="text/css">
<!--
.over {
background-image: url(images/bsgdgdagfasdgagsdg.gif);
}
-->
  </style>
  <style type="text/css">
<!--
.sideborders {
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #383A2E;
border-left-color: #383A2E;
}
-->
  </style>
  <style type="text/css">
<!--
input {
background-color: 4F5143;
border: 1px solid;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #B5B5B5;
}
-->
  </style>
  <style type="text/css">
<!--
a:link {
color: #B5B5B5;
text-decoration: none;
}
a:hover {
color: #B5B5B5;
text-decoration: underline;
}
a:visited {
color: #B5B5B5;
text-decoration: none;
}
-->
  </style>
</head>
<body topmargin="0" leftmargin="0" rightmargin="0"
 style="color: rgb(181, 181, 181); background-color: rgb(79, 81, 67);">
<table border="0" cellpadding="0" cellspacing="0"
 width="100%">
  <tbody>
    <tr>
      <td background="images/headerbghoriz.gif" height="158"
 valign="top" width="61">
      <div align="left"><img
 src="images/leftpixeltech.gif" height="155" width="61"></div>
      </td>
      <td background="images/headerbghoriz.gif" valign="top">
      <div align="center">
      <table border="0" cellpadding="0" cellspacing="0"
 width="100%">
        <tbody>
          <tr>
            <td valign="top">
            <div align="center"><img
 style="width: 839px; height: 128px;" src="images/header.jpg"></div>
            </td>
          </tr>
          <tr>
            <td>
            <table align="center" border="0"
 cellpadding="0" cellspacing="0">
              <tbody>
                <tr>
                  <td background="images/leftnavbutton.gif"
 height="30" width="127">
                  <table border="0" cellpadding="0"
 cellspacing="0" width="100%">
                    <tbody>
                      <tr>
                        <td height="4"></td>
                      </tr>
                      <tr>
                        <td>
                        <div align="center"><font
 color="#b5b5b5" face="Verdana, Arial, Helvetica, sans-serif"
 size="1">&nbsp;&nbsp;&nbsp;&nbsp;link one
here</font></div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                  </td>
                  <td><img src="images/navsep.gif"></td>
                  <td background="images/navbutton.gif"
 height="30" width="111">
                  <table border="0" cellpadding="0"
 cellspacing="0" width="100%">
                    <tbody>
                      <tr>
                        <td height="4"></td>
                      </tr>
                      <tr>
                        <td>
                        <div align="center"><font
 color="#b5b5b5" face="Verdana, Arial, Helvetica, sans-serif"
 size="1">link two here</font></div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                  </td>
                  <td><img src="images/navsep.gif"></td>
                  <td background="images/navbutton.gif"
 height="30" width="111">
                  <table border="0" cellpadding="0"
 cellspacing="0" width="100%">
                    <tbody>
                      <tr>
                        <td height="4"></td>
                      </tr>
                      <tr>
                        <td>
                        <div align="center"><font
 color="#b5b5b5" face="Verdana, Arial, Helvetica, sans-serif"
 size="1">link three here</font></div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                  </td>
                  <td><img src="images/navsep.gif"></td>
                  <td background="images/navbutton.gif"
 height="30" width="111">
                  <table border="0" cellpadding="0"
 cellspacing="0" width="100%">
                    <tbody>
                      <tr>
                        <td height="4"></td>
                      </tr>
                      <tr>
                        <td>
                        <div align="center"><font
 color="#b5b5b5" face="Verdana, Arial, Helvetica, sans-serif"
 size="1">link four here</font></div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                  </td>
                  <td><img src="images/navsep.gif"></td>
                  <td background="images/rightnavbutton.gif"
 height="30" width="128">
                  <table border="0" cellpadding="0"
 cellspacing="0" width="100%">
                    <tbody>
                      <tr>
                        <td height="4"></td>
                      </tr>
                      <tr>
                        <td>
                        <div align="center"><font
 color="#b5b5b5" face="Verdana, Arial, Helvetica, sans-serif"
 size="1">link five here &nbsp;&nbsp;&nbsp;</font></div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                  </td>
                </tr>
              </tbody>
            </table>
            </td>
          </tr>
        </tbody>
      </table>
      </div>
      </td>
      <td background="images/headerbghoriz.gif" valign="top"
 width="61">
      <div align="right"><img
 src="images/rightpixeltech.gif" width="61"></div>
      </td>
    </tr>
  </tbody>
</table>
<table style="width: 962px; height: 45px;" border="0"
 cellpadding="0" cellspacing="0" width="962">
  <tbody>
    <tr>
      <td background="images/navbg.gif" height="26"
 valign="top"></td>
      <td background="images/navbg.gif" height="26"
 valign="top"></td>
      <td background="images/navbg.gif" height="26"
 valign="top"></td>
    </tr>
    <tr>
      <td background="images/navbgshadow.gif" height="11"></td>
      <td background="images/navbgshadow.gif" height="11"></td>
      <td background="images/navbgshadow.gif" height="11"></td>
    </tr>
  </tbody>
</table>
<table style="width: 959px; height: 611px;" border="0"
 cellpadding="0" cellspacing="0" width="959">
  <tbody>
    <tr>
      <td valign="top">
      <p>&nbsp;</p>
      <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      </p>
      <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp; <br>
      </p>
      </td>
      <td valign="top" width="100%">
      <table style="width: 805px; height: 174px;" border="0"
 cellpadding="0" cellspacing="5" width="805">
        <tbody>
          <tr>
            <td>
            <table align="center" border="0"
 cellpadding="0" cellspacing="0" width="100%">
              <tbody>
                <tr>
                  <td>
                  <table border="0" cellpadding="0"
 cellspacing="0" width="100%">
                    <tbody>
                      <tr>
                        <td background="images/mcbg.gif"
 valign="top">
                        <table style="width: 579px; height: 32px;"
 border="0" cellpadding="0" cellspacing="0">
                          <tbody>
                            <tr>
                              <td height="9">
                              <p align="left"><font
 color="#b5b5b5" face="Verdana, Arial, Helvetica, sans-serif"
 size="1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;<span style="font-weight: bold; color: rgb(255, 255, 255);">Pricing
Details</span></font></p>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                  </td>
                </tr>
                <tr>
                  <td class="sideborders" bgcolor="#5c5e4f"
 height="20">
                  <div align="center"> </div>
                  </td>
                </tr>
                <tr>
                  <td class="sideborders"
 background="images/crbg.gif" height="36">
                  <div align="center">
                  <table style="width: 583px; height: 36px;"
 border="0" cellpadding="0" cellspacing="0">
                    <tbody>
                      <tr>
                        <td height="2"><font
 face="Verdana, Arial, Helvetica, sans-serif" size="1"><span
 style="color: rgb(255, 255, 255);">&nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;Copyright
2007 - </span><span style="color: rgb(51, 204, 255);">Dudley's
Warehouse.com</span> <span style="color: rgb(255, 255, 255);">-
Modified by</span> <a
 href="TAKEN OUT"><span
 style="color: rgb(51, 204, 255);">TAKEN OUT</span></a></font></td>
                      </tr>
                    </tbody>
                  </table>
                  </div>
                  </td>
                </tr>
              </tbody>
            </table>
&nbsp; </td>
          </tr>
        </tbody>
      </table>
      <table style="width: 959px; height: 611px;" border="0"
 cellpadding="0" cellspacing="0" width="959">
        <tbody>
          <tr>
            <td valign="top">
            <p>&nbsp;</p>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <br>
            <table style="width: 805px; height: 174px;"
 border="0" cellpadding="0" cellspacing="5"
 width="805">
              <tbody>
                <tr>
                  <td>
                  <table align="center" border="0"
 cellpadding="0" cellspacing="0" width="100%">
                    <tbody>
                      <tr>
                        <td>
                        <table border="0" cellpadding="0"
 cellspacing="0" width="100%">
                          <tbody>
                            <tr>
                              <td background="images/mcbg.gif"
 valign="top">
                              <table
 style="width: 579px; height: 32px;" border="0"
 cellpadding="0" cellspacing="0">
                                <tbody>
                                  <tr>
                                    <td height="9">
                                    <p align="left"><font
 color="#b5b5b5" face="Verdana, Arial, Helvetica, sans-serif"
 size="1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;<span style="font-weight: bold; color: rgb(255, 255, 255);">Pricing
Details</span></font></p>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                        </td>
                      </tr>
                      <tr>
                        <td class="sideborders"
 bgcolor="#5c5e4f" height="20">
                        <div align="center"> List of the
banner
ads. </div>
                        </td>
                      </tr>
                      <tr>
                        <td class="sideborders"
 background="images/crbg.gif" height="36">
                        <div align="center">
                        <table style="width: 583px; height: 36px;"
 border="0" cellpadding="0" cellspacing="0">
                          <tbody>
                            <tr>
                              <td height="2"><font
 face="Verdana, Arial, Helvetica, sans-serif" size="1"><span
 style="color: rgb(255, 255, 255);">&nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;Copyright
2007 - </span><span style="color: rgb(51, 204, 255);">TAKEN OUT</span> <span style="color: rgb(255, 255, 255);">-
Modified by</span> <a
 href="NAME TAKEN OUT"><span
 style="color: rgb(51, 204, 255);">TAKEN OUT</span></a></font></td>
                            </tr>
                          </tbody>
                        </table>
                        </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
&nbsp; </td>
                </tr>
              </tbody>
            </table>
            </p>
            </td>
            <td valign="top" width="100%"> </td>
            <td valign="top"> <br>
            </td>
          </tr>
        </tbody>
      </table>
      </td>
      <td valign="top"> <br>
      </td>
    </tr>
  </tbody>
</table>

Dani AI

Generated

Short summary and practical next steps (builds on and ):

Your page is built with nested tables and inline attributes. The quickest, least disruptive fix is to isolate the area you want limited (for example the "Pricing Details" block) and put that table inside a scrolling container. pointed this out; was right that moving to DIV/CSS layout is cleaner long-term — but you can do the scroll fix incrementally.

Example pattern to integrate now (wrap the content, add keyboard focus and ARIA):

<!-- wrap the table you want to limit -->
<div class="scroll-wrap" tabindex="0" role="region" aria-label="Pricing details">
  <!-- existing table markup goes here -->
</div>
/* CSS */
.scroll-wrap {
  max-height: 320px;        /* pick a value that fits your design */
  overflow-y: auto;         /* vertical scrollbar when needed */
  -webkit-overflow-scrolling: touch; /* smooth scrolling on mobile */
}

If you want the table header to remain visible while rows scroll, use sticky headers in modern browsers:

.data-table thead th {
  position: sticky;
  top: 0;
  background: #5c5e4f;
  z-index: 2;
}

Notes, gotchas and troubleshooting:

  • Use max-height in px for predictable results. Percentage heights need a parent with explicit height.
  • If the scrollbar never appears, check parents for overflow:hidden or fixed heights.
  • Older browsers (and very old IE) may not support position: sticky; for those, split header into its own table above a scrollable tbody or set explicit column widths when using the display:block tbody trick.
  • Make the scroll region keyboard-accessible with tabindex="0" so arrow keys and screen readers can interact with it (ARIA role=region helps).
  • Gradually replace inline font, topmargin, and nested layout tables with CSS and semantic markup when time allows.

References: MDN docs for overflow-y, position: sticky, and ARIA region role.

Recommended Answers

All 2 Replies

Without digging through almost 400 lines of partially unformatted html coding, I would say you should put your data in a scrollable div.

<div style="height:100px;overflow:auto;">
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
  </div>

you could also lose the table and redo the content in DIV's too which should cut down and simplify the code.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.