www.webdeveloper.com
Results 1 to 2 of 2

Thread: Scrollable Tables issue

  1. #1
    Join Date
    Feb 2011
    Posts
    49

    Scrollable Tables issue

    i've been trying to get this table to scroll right but it isn't.. sames i'm missing something.

    What i'm trying to do is a fixed header and then table for input. But the two tables aren't staying together.

    Is there a css code i'm missing

    Any advise.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    
    <html>
    <head>
    <title>Page title</title>
    </head>
    <body>
    
    <table border=1 align="center" width="590px">
    		<tr><td> 4 more rows of data above</td></tr>
    		<tr>
    				<td colspan="4">
    				
    		<table align="center" border=1 id="header">
    		<COL WIDTH=50px><COL WIDTH=80px><COL WIDTH=120px><COL WIDTH=130px>
    		<tr>
        		<td>Call #</td>
    				<td>Account #</td>
        		<td>Premiums Added</td>
        		<td>Premiums Cancelled</td>
    		</tr>
    		</table>
    		<div STYLE="overflow:auto; height:300px;" >
    		<table id="tracker" align="center" border=1>
    		    <COL WIDTH=50px><COL WIDTH=80px><COL WIDTH=120px><COL WIDTH=130px>
    				<tr> <td><input type='text' size=3 maxlength=3></td> <td><input type='text' size=9 maxlength=8 id='accountnum"+callsnum+"'></td> <td><input type='text' size=3 maxlength=3 id='Upgrades"+callsnum+"' onchange='update()'></td> <td><input type='text' size=3 maxlength=3 id='Downgrades"+callsnum+"' onchange='update()'></td> </tr>
    				<tr> <td><input type='text' size=3 maxlength=3></td> <td><input type='text' size=9 maxlength=8 id='accountnum"+callsnum+"'></td> <td><input type='text' size=3 maxlength=3 id='Upgrades"+callsnum+"' onchange='update()'></td> <td><input type='text' size=3 maxlength=3 id='Downgrades"+callsnum+"' onchange='update()'></td> </tr>
    				<tr> <td><input type='text' size=3 maxlength=3></td> <td><input type='text' size=9 maxlength=8 id='accountnum"+callsnum+"'></td> <td><input type='text' size=3 maxlength=3 id='Upgrades"+callsnum+"' onchange='update()'></td> <td><input type='text' size=3 maxlength=3 id='Downgrades"+callsnum+"' onchange='update()'></td> </tr>
    				<tr> <td><input type='text' size=3 maxlength=3></td> <td><input type='text' size=9 maxlength=8 id='accountnum"+callsnum+"'></td> <td><input type='text' size=3 maxlength=3 id='Upgrades"+callsnum+"' onchange='update()'></td> <td><input type='text' size=3 maxlength=3 id='Downgrades"+callsnum+"' onchange='update()'></td> </tr>
    				<tr> <td><input type='text' size=3 maxlength=3></td> <td><input type='text' size=9 maxlength=8 id='accountnum"+callsnum+"'></td> <td><input type='text' size=3 maxlength=3 id='Upgrades"+callsnum+"' onchange='update()'></td> <td><input type='text' size=3 maxlength=3 id='Downgrades"+callsnum+"' onchange='update()'></td> </tr>
    				<tr> <td><input type='text' size=3 maxlength=3></td> <td><input type='text' size=9 maxlength=8 id='accountnum"+callsnum+"'></td> <td><input type='text' size=3 maxlength=3 id='Upgrades"+callsnum+"' onchange='update()'></td> <td><input type='text' size=3 maxlength=3 id='Downgrades"+callsnum+"' onchange='update()'></td> </tr>
    				<tr> <td><input type='text' size=3 maxlength=3></td> <td><input type='text' size=9 maxlength=8 id='accountnum"+callsnum+"'></td> <td><input type='text' size=3 maxlength=3 id='Upgrades"+callsnum+"' onchange='update()'></td> <td><input type='text' size=3 maxlength=3 id='Downgrades"+callsnum+"' onchange='update()'></td> </tr>
    				<tr> <td><input type='text' size=3 maxlength=3></td> <td><input type='text' size=9 maxlength=8 id='accountnum"+callsnum+"'></td> <td><input type='text' size=3 maxlength=3 id='Upgrades"+callsnum+"' onchange='update()'></td> <td><input type='text' size=3 maxlength=3 id='Downgrades"+callsnum+"' onchange='update()'></td> </tr>
    				<tr> <td><input type='text' size=3 maxlength=3></td> <td><input type='text' size=9 maxlength=8 id='accountnum"+callsnum+"'></td> <td><input type='text' size=3 maxlength=3 id='Upgrades"+callsnum+"' onchange='update()'></td> <td><input type='text' size=3 maxlength=3 id='Downgrades"+callsnum+"' onchange='update()'></td> </tr>
    				<tr> <td><input type='text' size=3 maxlength=3></td> <td><input type='text' size=9 maxlength=8 id='accountnum"+callsnum+"'></td> <td><input type='text' size=3 maxlength=3 id='Upgrades"+callsnum+"' onchange='update()'></td> <td><input type='text' size=3 maxlength=3 id='Downgrades"+callsnum+"' onchange='update()'></td> </tr>
    				<tr> <td><input type='text' size=3 maxlength=3></td> <td><input type='text' size=9 maxlength=8 id='accountnum"+callsnum+"'></td> <td><input type='text' size=3 maxlength=3 id='Upgrades"+callsnum+"' onchange='update()'></td> <td><input type='text' size=3 maxlength=3 id='Downgrades"+callsnum+"' onchange='update()'></td> </tr>
    				<tr> <td><input type='text' size=3 maxlength=3></td> <td><input type='text' size=9 maxlength=8 id='accountnum"+callsnum+"'></td> <td><input type='text' size=3 maxlength=3 id='Upgrades"+callsnum+"' onchange='update()'></td> <td><input type='text' size=3 maxlength=3 id='Downgrades"+callsnum+"' onchange='update()'></td> </tr>
    				<tr> <td><input type='text' size=3 maxlength=3></td> <td><input type='text' size=9 maxlength=8 id='accountnum"+callsnum+"'></td> <td><input type='text' size=3 maxlength=3 id='Upgrades"+callsnum+"' onchange='update()'></td> <td><input type='text' size=3 maxlength=3 id='Downgrades"+callsnum+"' onchange='update()'></td> </tr>
    				<tr> <td><input type='text' size=3 maxlength=3></td> <td><input type='text' size=9 maxlength=8 id='accountnum"+callsnum+"'></td> <td><input type='text' size=3 maxlength=3 id='Upgrades"+callsnum+"' onchange='update()'></td> <td><input type='text' size=3 maxlength=3 id='Downgrades"+callsnum+"' onchange='update()'></td> </tr>
    				<tr> <td><input type='text' size=3 maxlength=3></td> <td><input type='text' size=9 maxlength=8 id='accountnum"+callsnum+"'></td> <td><input type='text' size=3 maxlength=3 id='Upgrades"+callsnum+"' onchange='update()'></td> <td><input type='text' size=3 maxlength=3 id='Downgrades"+callsnum+"' onchange='update()'></td> </tr>
    				<tr> <td><input type='text' size=3 maxlength=3></td> <td><input type='text' size=9 maxlength=8 id='accountnum"+callsnum+"'></td> <td><input type='text' size=3 maxlength=3 id='Upgrades"+callsnum+"' onchange='update()'></td> <td><input type='text' size=3 maxlength=3 id='Downgrades"+callsnum+"' onchange='update()'></td> </tr>
    				<tr> <td><input type='text' size=3 maxlength=3></td> <td><input type='text' size=9 maxlength=8 id='accountnum"+callsnum+"'></td> <td><input type='text' size=3 maxlength=3 id='Upgrades"+callsnum+"' onchange='update()'></td> <td><input type='text' size=3 maxlength=3 id='Downgrades"+callsnum+"' onchange='update()'></td> </tr>
    				<tr> <td><input type='text' size=3 maxlength=3></td> <td><input type='text' size=9 maxlength=8 id='accountnum"+callsnum+"'></td> <td><input type='text' size=3 maxlength=3 id='Upgrades"+callsnum+"' onchange='update()'></td> <td><input type='text' size=3 maxlength=3 id='Downgrades"+callsnum+"' onchange='update()'></td> </tr>
    				<tr> <td><input type='text' size=3 maxlength=3></td> <td><input type='text' size=9 maxlength=8 id='accountnum"+callsnum+"'></td> <td><input type='text' size=3 maxlength=3 id='Upgrades"+callsnum+"' onchange='update()'></td> <td><input type='text' size=3 maxlength=3 id='Downgrades"+callsnum+"' onchange='update()'></td> </tr>
    				<tr> <td><input type='text' size=3 maxlength=3></td> <td><input type='text' size=9 maxlength=8 id='accountnum"+callsnum+"'></td> <td><input type='text' size=3 maxlength=3 id='Upgrades"+callsnum+"' onchange='update()'></td> <td><input type='text' size=3 maxlength=3 id='Downgrades"+callsnum+"' onchange='update()'></td> </tr>
    				<tr> <td><input type='text' size=3 maxlength=3></td> <td><input type='text' size=9 maxlength=8 id='accountnum"+callsnum+"'></td> <td><input type='text' size=3 maxlength=3 id='Upgrades"+callsnum+"' onchange='update()'></td> <td><input type='text' size=3 maxlength=3 id='Downgrades"+callsnum+"' onchange='update()'></td> </tr>
    				<tr> <td><input type='text' size=3 maxlength=3></td> <td><input type='text' size=9 maxlength=8 id='accountnum"+callsnum+"'></td> <td><input type='text' size=3 maxlength=3 id='Upgrades"+callsnum+"' onchange='update()'></td> <td><input type='text' size=3 maxlength=3 id='Downgrades"+callsnum+"' onchange='update()'></td> </tr>
    				<tr> <td><input type='text' size=3 maxlength=3></td> <td><input type='text' size=9 maxlength=8 id='accountnum"+callsnum+"'></td> <td><input type='text' size=3 maxlength=3 id='Upgrades"+callsnum+"' onchange='update()'></td> <td><input type='text' size=3 maxlength=3 id='Downgrades"+callsnum+"' onchange='update()'></td> </tr>
    				<tr> <td><input type='text' size=3 maxlength=3></td> <td><input type='text' size=9 maxlength=8 id='accountnum"+callsnum+"'></td> <td><input type='text' size=3 maxlength=3 id='Upgrades"+callsnum+"' onchange='update()'></td> <td><input type='text' size=3 maxlength=3 id='Downgrades"+callsnum+"' onchange='update()'></td> </tr>
    		</table>
    		</div>	
    		    </td>
    		</tr>
    		<tr><td></td></tr>
    </table>
    
    </body>
    </html>
    </body>
    </html>

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    The general rules for a scrollable div is:

    1. The container parent should have position:relative and overflow:auto (or scroll, or visible)
    2. The content child should have position:absolute

    Example:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <style type="text/css">
    table {
    border-collapse:collapse;
    width:400px;
    }
    table th {
    border:1px solid #f00;
    }
    table td {
    border:1px solid #000;
    }
    div.tabcont{
    width:418px;
    height:150px;
    overflow:auto;
    position:relative;
    }
    div.tabcont table{
    position:absolute;
    }
    </style>
    <body>
    <table>
      <tr>
        <th>head</td>
        <th>head</td>
        <th>head</td>
        <th>head</td>
      </tr>
    </table>
    <div class="tabcont">
    <table>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table>
    </div>
    </body>
    </html>
    Don't forget to put a Doctype in the top of your document.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles