Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Oct 2007
    Posts
    48
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Fixed header table in all browser

    Hi!

    I found this code. This is a solution for fixed header and footer table.
    It works fine only with IE6-7 and Firefox 2-3.

    Is tehere a way to fix this to work with other browsers? (Opera, Safari, Chrome)

    Thx

    Code:
    <!-- This comment keeps IE6/7 in the reliable quirks mode -->
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Scrollable Table with Fixed Header, repeat print header and footer</title>
    
    <meta name="keywords" content="fixed table header; non-scroll header; fixed footer; freeze header; CSS tips; print repeating headers; print repeating footers">
    
    <link rel="stylesheet" href="basic.css" type="text/css">
    
    <style type="text/css">
    div.tableContainer {
    	width: 65%;		/* table width will be 99% of this*/
    	height: 295px; 	/* must be greater than tbody*/
    	overflow: auto;
    	margin: 0 auto;
    	}
    
    table {
    	width: 99%;		/*100% of container produces horiz. scroll in Mozilla*/
    	border: none;
    	background-color: #f7f7f7;
    	}
    	
    table>tbody	{  /* child selector syntax which IE6 and older do not support*/
    	overflow: auto; 
    	height: 250px;
    	overflow-x: hidden;
    	}
    	
    thead tr	{
    	position:relative; 
    	top: expression(offsetParent.scrollTop); /*IE5+ only*/
    	}
    	
    thead td, thead th {
    	text-align: center;
    	font-size: 14px; 
    	background-color: oldlace;
    	color: steelblue;
    	font-weight: bold;
    	border-top: solid 1px #d8d8d8;
    	}	
    	
    td	{
    	color: #000;
    	padding-right: 2px;
    	font-size: 12px;
    	text-align: right;
    	border-bottom: solid 1px #d8d8d8;
    	border-left: solid 1px #d8d8d8;
    	}
    	
    table tfoot tr { /*idea of Renato Cherullo to help IE*/
          position: relative; 
          overflow-x: hidden;
          top: expression(parentNode.parentNode.offsetHeight >= 
    	  offsetParent.offsetHeight ? 0 - parentNode.parentNode.offsetHeight + offsetParent.offsetHeight + offsetParent.scrollTop : 0);
          }
    
    
    tfoot td	{
    	text-align: center;
    	font-size: 11px;
    	font-weight: bold;
    	background-color: papayawhip;
    	color: steelblue;
    	border-top: solid 1px slategray;
    	}
    
    td:last-child {padding-right: 20px;} /*prevent Mozilla scrollbar from hiding cell content*/
    
    </style>
    
    
    
    <!-- print style sheet -->
    <style type="text/css" media="print">
    div.tableContainer {overflow: visible;	}
    table>tbody	{overflow: visible; }
    td {height: 14pt;} /*adds control for test purposes*/
    thead td	{font-size: 11pt;	}
    tfoot td	{
    	text-align: center;
    	font-size: 9pt;
    	border-bottom: solid 1px slategray;
    	}
    	
    thead	{display: table-header-group;	}
    tfoot	{display: table-footer-group;	}
    thead th, thead td	{position: static; } 
    
    thead tr	{position: static; } /*prevent problem if print after scrolling table*/ 
    table tfoot tr {     position: static;    }
    
    
    </style>
    
    </head>
    
    <body>
    
    <div id="container">
    
    <h2>Scrollable Table with Fixed Header</h2>
    <h3>Non-Scrolling Header and Footer; Printing Repeated Headers and Footers</h3>
    
    <p>This frozen / locked HTML table header is a usability advance done without HTML fakery such as hidden tables, frames, or JavaScript. Tested in (Windows) Mozilla-spawned browsers (incl. Netscape 6+ and Firefox) and IE5+. IE has problems with the screen behavior of the footer—but thanks to a clever expression provided by Renato Cherullo, even IE6 can have a modern footer. Mozilla self-induces display problems cramming the scrollbar into the last column, which can be corrected with advanced selector syntax. Surprisingly, both render the printed version of the table consistently well, including the repeated headers and footers.</p>
    <p>Links: <a href="../fall99.htm">Windows tutorial</a> on the methods used &sect; <a href="locked-column-csv.html">Extension in IE</a> to provide locked columns &sect; <a href="nonscroll-table-header2.html">Dealing with Form Selects (with Safari compatibility added)</a> in data tables &sect;  <a href="nonscroll-table-header3.html">Vertical variation</a> on theme <small>(IE5.5+ only)</small>
    </p>
    
    
    
    
    
    
    <div class="tableContainer">
      <table cellspacing="0">
         <thead>
          <tr> 
            <td width="18%">Station</td>
            <td width="38%">Date</td>
            <td width="28%">Status</td>
            <td width="16%">Num.</td>
          </tr>
        </thead>
        <tfoot>
          <tr> 
          <td colspan="5">Table footer repeats on print</td>
          </tr>
        </tfoot>
        <tbody>
          <tr> 
            <td>KABC</td>
            <td>09/12/2002</td>
            <td>Submitted</td>
            <td>0</td>
          </tr>
          <tr> 
            <td>KCBS</td>
            <td>09/11/2002</td>
            <td>Lockdown</td>
            <td>2</td>
          </tr>
          <tr> 
    ..
    ..
       </tbody>
      </table>
    
    </div>
    
    
    </div> <!-- end container -->
    </body>
    </html>
    Full code is here:

    http://web.tampabay.rr.com/bmerkey/e...le-header.html

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello yvorl,
    That is such a short height it doesn't seem like you'd really need a fixed header.
    A fixed header is not hard to do though - http://nopeople.com/CSS/position%20fixed/ shows how to fix an element.
    And a scrolling box is easy too - http://nopeople.com/CSS/scrollers/index.html

    I don't know where you found that code at but I'm pretty sure that this is wrong
    Edit: the "reliable" part I mean
    Code:
     <!-- This comment keeps IE6/7 in the reliable quirks mode -->
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    Last edited by Excavator; 03-04-2009 at 04:58 AM. Reason: had to clarify a point
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,854
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Hi yvorl, I haven't checked your current code, but there was a similar thread handled by VIPStephan, which may help you too. looking for something like excel's freeze panes
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    New Coder
    Join Date
    Oct 2007
    Posts
    48
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Excavator:

    <!-- This comment keeps IE6/7 in the reliable quirks mode -->
    This is probably wrong, but definitely need to work this code right.
    This code is just an example, I'm working with more height and more content.

    In the bottom of my first comment you can find the place i found the code.

    I'll check the links you wrote, but according to my experience to do a cross-browser table with a fixed header is not so easy.
    A fixed div box, and a scroller is just one part of the problem. It should be a table.

    abduraooft:

    I've checked the the thread, and it seems to be good, but until it's not working under ie7 i've got the same problem.

    Anyone:

    If someone checked my code and found some fix, i would still appriciate it


  •  

    Posting Permissions

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