www.webdeveloper.com
+ Reply to Thread
Results 1 to 2 of 2
  1. 03-07-2011 04:48 PM #1
    DJScript
    DJScript is offline Registered User
    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>
    Reply With Quote Reply With Quote
  2. 03-08-2011 08:12 AM #2
    Kor's Avatar
    Kor
    Kor is offline Red Devil Moderator
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,427
    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.
    KOR
    Windows Forum
    Register as or Find a freelancer
    Offshore programming
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Thread Information

Users Browsing this Thread

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

     

Bookmarks

Posting Permissions

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

Forum Rules

 HTML5 Development Center



Recent Articles