SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict animgirl's Avatar
    Join Date
    Oct 2003
    Location
    Land of the free, home of the brave
    Posts
    215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Table and scroller question

    Hello,

    Here is the code I am working with; the output can be seen in "example.gif". It's easier to understand the problem after you have seen the .gif screenshot.

    Code:
    <!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=iso-8859-1" />
    <title>Example</title>
    <style type="text/css">
    .bg {
    	background-color:#3F4785;
    }
    .top {
    	background-color:#3F4785;
    }
    .sections {
    	background-color:#787BB0;
    	color:white;
    	font-size:11px;
    	font-weight:bold;
    }
    .lavendar, .robin {
    	font-size:11px;
    	font-weight:bold;
    }
    .lavendar {
    	background-color:#DFDEEE;
    	color:#717173;
    }
    .robin {
    	background-color:#DFEAF0;
    	color:#717173;
    }
    .wef_scroller {
    	height:168px;
    	width:100%;
    	overflow:auto;
    	overflow-x:hidden;
    }
    .white {
    	background-color:white;
    }
    .beige {
    	background-color:#EFE3C9;
    }
    .purple {
    	background-color:#DFDEEE;
    }
    .wef_bg {
    	background: white url(../images/wef_bg.jpg) repeat-x top right;
    }
    </style>
    </head>
    <table cellpadding="0" cellspacing="0" width="100%" class="white">
    <tr><td height="6" colspan="3" align="right" valign="top">
    <img src="../images/tabs/white_box/wef_top_right.gif" alt="">
    </td></tr>
    <tr>
    <td width="8"></td>
    <td>
    <div class="wef_scroller">
    <table cellpadding="5" cellspacing="1" width="100%" class="white">
    <tr class="sections">
    <td>cell1</td><td>cell 2</td><td>cell 3</td><td>cell 4</td>
    </tr>
    <tr class="lavendar">
    <td>cell 1</td><td>cell 2</td><td>cell 3</td><td>cell 4</td>
    </tr>
    <tr class="robin">
    <td>cell 1</td><td>cell 2</td><td>cell 3</td><td>cell 4</td>
    </tr>
    <tr class="lavendar">
    <td>cell 1</td><td>cell 2</td><td>cell 3</td><td>cell 4</td>
    </tr>
    <tr class="robin">
    <td>cell 1</td><td>cell 2</td><td>cell 3</td><td>cell 4</td>
    </tr>
    <tr class="lavendar">
    <td>cell 1</td><td>cell 2</td><td>cell 3</td><td>cell 4</td>
    </tr>
    <tr class="robin">
    <td>cell 1</td><td>cell 2</td><td>cell 3</td><td>cell 4</td>
    </tr>
    <tr class="lavendar">
    <td>cell 1</td><td>cell 2</td><td>cell 3</td><td>cell 4</td>
    </tr>
    <tr class="robin">
    <td>cell 1</td><td>cell 2</td><td>cell 3</td><td>cell 4</td>
    </tr>
    </table>
    </div>
    </td>
    <td width="8"></td>
    </tr>
    </table>
    
    <body>
    </body>
    </html>
    I need to have the top dark purple row outside of the scroller area. Problem is, I don't want it to be a separate table altogether because I'd like the table rows from within the scroller to match up with the top dark purple row items. From what I've experimented with, a scroller (made via a div) only works around a table.

    Do you have any ideas on how I could work around this?
    Thanks!
    Attached Images Attached Images
    Elise Henley

  2. #2
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe this is what you're looking for:

    http://www.imaputz.com/cssStuff/bigFourVersion.html

    Basically, the trick is to use the tags <thead> and <tbody> and use css to set a fixed height and the overflow to auto in tbody. You should also consider using <th> for your first row. It should then look like something like this:

    Code:
    <table>
        <thead>
            <tr>
                <th>Heading 1</th>
                <th>Heading 2</th>
                <th>heading 3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Cell 1</td>
                <td>Cell 2</td>
                <td>Cell 3</td>
            </tr>
        </tbody>
    </table>
    Hope that helps
    Dan G
    Marketing Strategist & Consultant


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
  •