Jump to content

CSS Scrolling Table


RIRedinPA

Recommended Posts

I am trying to make a table that has a horizontally scrolling headers but fixed when scrolled vertically (think Excel). After spending a few days attempting this I was able to make a solution that works in FF, Safari and IE6.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>

<body>

<div id="outerdiv" style="position: relative; top: 100px; left: 100px;  width: 900px; height: 200px; overflow-x: auto; overflow-y: hidden; border: 1px solid red;">
<div id="innerdivhead" style="position: absolute; top: 3px; left: 3px; width: 1200px; height: 25px; ">
    			<table cellpadding="3" cellspacing="0" border="1">
             <tr>
             <td width="300">Header 1</td>
             <td width="300">Header 2</td>
             <td width="300">Header 3</td>
             <td width="300">Header 4</td>
             </tr>
          	 </table>
    		<div id="innerdivbody" style="position: absolute; top: 29px; left: 0px; width: 1200px; height: 175px; overflow-y: auto; ">
          	<div id="tablediv" style="position: absolute; top: 6px; left: 0px; width: 1200px;">
            	<table cellpadding="3" cellspacing="0" border="1">
             <tr>
             <td width="300">Cell 1</td>
             <td width="300">Cell 2</td>
             <td width="300">Cell 3</td>
             <td width="300">Cell 4</td>
             </tr>
             
             <tr>
             <td>Cell 1</td>
             <td>Cell 2</td>
             <td>Cell 3</td>
             <td>Cell 4</td>
             </tr>
             
             <tr>
             <td>Cell 1</td>
             <td>Cell 2</td>
             <td>Cell 3</td>
             <td>Cell 4</td>
             </tr>
             
             <tr>
             <td>Cell 1</td>
             <td>Cell 2</td>
             <td>Cell 3</td>
             <td>Cell 4</td>
             </tr>
             
             <tr>
             <td>Cell 1</td>
             <td>Cell 2</td>
             <td>Cell 3</td>
             <td>Cell 4</td>
             </tr>
             
             <tr>
             <td>Cell 1</td>
             <td>Cell 2</td>
             <td>Cell 3</td>
             <td>Cell 4</td>
             </tr>
             
             <tr>
             <td>Cell 1</td>
             <td>Cell 2</td>
             <td>Cell 3</td>
             <td>Cell 4</td>
             </tr>
             
             <tr>
             <td>Cell 1</td>
             <td>Cell 2</td>
             <td>Cell 3</td>
             <td>Cell 4</td>
             </tr>
             </table>
            </div>
          </div>
   </div>
</div>
</body>
</html>

 

My problem is the end result needs to be more robust than this simple table. Each cell has to be editable. I can achieve this by placing form items in the cells (textarea, text input, checkboxes) and firing off some AJAX with an onchange handler. However, when I do the layout of the second table changes and the borders of both tables no longer line up, even with the hard coded widths.

 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>

<body>

<div id="outerdiv" style="position: relative; top: 100px; left: 100px;  width: 900px; height: 200px; overflow-x: auto; overflow-y: hidden; border: 1px solid red;">
<div id="innerdivhead" style="position: absolute; top: 3px; left: 3px; width: 1200px; height: 25px; ">
    			<table cellpadding="3" cellspacing="0" border="1">
             <tr>
             <td width="300">Header 1</td>
             <td width="300">Header 2</td>
             <td width="300">Header 3</td>
             <td width="300">Header 4</td>
             </tr>
          	 </table>
    		<div id="innerdivbody" style="position: absolute; top: 29px; left: 0px; width: 1200px; height: 175px; overflow-y: auto; ">
          	<div id="tablediv" style="position: absolute; top: 6px; left: 0px; width: 1200px;">
            	<table cellpadding="3" cellspacing="0" border="1">
             <tr>
             <td width="300"><textarea name="ta1" rows=4 cols=20>Test</textarea></td>
             <td width="300">Cell 2</td>
             <td width="300">Cell 3</td>
             <td width="300">Cell 4</td>
             </tr>
             
             <tr>
             <td>Cell 1</td>
             <td>Cell 2</td>
             <td>Cell 3</td>
             <td>Cell 4</td>
             </tr>
             
             <tr>
             <td>Cell 1</td>
             <td>Cell 2</td>
             <td>Cell 3</td>
             <td>Cell 4</td>
             </tr>
             
             <tr>
             <td>Cell 1</td>
             <td>Cell 2</td>
             <td>Cell 3</td>
             <td>Cell 4</td>
             </tr>
             
             <tr>
             <td>Cell 1</td>
             <td>Cell 2</td>
             <td>Cell 3</td>
             <td>Cell 4</td>
             </tr>
             
             <tr>
             <td>Cell 1</td>
             <td>Cell 2</td>
             <td>Cell 3</td>
             <td>Cell 4</td>
             </tr>
             
             <tr>
             <td>Cell 1</td>
             <td>Cell 2</td>
             <td>Cell 3</td>
             <td>Cell 4</td>
             </tr>
             
             <tr>
             <td>Cell 1</td>
             <td>Cell 2</td>
             <td>Cell 3</td>
             <td>Cell 4</td>
             </tr>
             </table>
            </div>
          </div>
   </div>
</div>
</body>
</html>

 

I know about <thead> and <tbody> tags but couldn't get the table to scroll properly with them. Any ideas would be greatly appreciated.

 

Link to comment
https://forums.phpfreaks.com/topic/141485-css-scrolling-table/
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.