Fixed page and table header w/ scrolling table content?

Discussion in 'Web Design' started by PapaGeek, Dec 29, 2014.

to remove all ads.
  1. PapaGeek

    PapaGeek New Member

    Messages:
    43
    I’m working on a large project that displays a huge amount of data in one large table with a one line, 3 part, page header above it.

    Here is an example of a smaller page, less than 100 lines, http://www.papageek.com/funds/web/index.html . I want the page header, table header, and the first 3 table rows, tan background, to be fixed. The normal page scroll bar to the right should only scroll the remaining table lines.

    I’ve found a few examples that use DIV commands to define the locked portion of the page, but it is not proper HTML syntax to start a DIV outside a TABLE definition and end it inside the table. Breaking the example into two tables kills the body column alignment with the header.

    Is there a CSS or JavaScript method for doing this?
     
    Last edited: Dec 29, 2014
  2. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,611
    If it works, why does that matter?
     
  3. PapaGeek

    PapaGeek New Member

    Messages:
    43
    My first try with the code I found did not work properly, and since it was poor HTML syntax, i I did not continue that approach.
     
  4. PapaGeek

    PapaGeek New Member

    Messages:
    43
    Here are two examples of what I have tried so far:

    http://www.papageek.com/funds/web/scroll.html This example locks the page header, which is a table in itself, in place. The coding wraps the page header in DIV commands, class=page-header, and classifies the second table as class=content. This example does work, but it does not include locking the first 4 rows of the table in place. Code fragments:
    Code:
    . . .
    .page-header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 60px;
      background-color: linen;
    }
    .content {    margin: 65px auto;  }
    . . .
    </style>
    </head><body><div class = page-header>
    <table width="100%"><tr> . . .
    </tr></table></div>
    <center><table border=1 bgcolor=white class=content>
    . . .
    My first attempt to lock the first 3 rows was to remove the class of the second table, move the initial /DIV to a position after the 4th table line followed by a DIV class=content. This was not proper DHTML, DIV, TABLE, /DIV, /TABLE, and the second table did not even display!

    http://www.papageek.com/funds/web/scroll2.html My second attempt was to remove the class content from the second table, enclose the first 4 rows in a DIV class=table-header, and enclose the remaining table rows in a DIV class=table-content, but the entire table moved to the table-content CSS position.
    Code:
    .page-header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 60px;
      background-color: linen;
    }
    .table-header {
      position: fixed;
      top: 65;
      left: 0;
      width: 100%;
      height: 150px;
      background-color: linen;
    }
    .table-content{
        margin: 265px auto;
    }
    . . .
    </style>
    </head><body><div class = page-header>
    <table width="100%"><tr>
    . . .
    </tr></table></div>
    <center><table border=1 bgcolor=white>
    <div class=table-header><tr>
    First 4 table rows
    </tr></div>
    <div class=table-content>
    <tr>
    Rest of the table
    </tr></div>
    </center></table></body></html>
    Any suggestions on the proper code to lock the first 4 table lines at the top of the page would be appreciated .
     
  5. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,611
    Have you tried using a <tbody> element to hold the scrollable block of rows?
     
  6. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,611
    Bit of playing about gets this.

    http://chrishirst.co.uk/examples/scroll-table-demo.html


    Code

    HTML:
    <html>
    	<head>
    		<meta http-equiv="content-type" content="text/html">
    		<meta charset="UTF-8">
    		<script type="text/javascript">
    
    		</script>
    		<style>
    			thead, tbody {
    				display: block;
    				width: 100%;
    				}
    			tr.foot td {
    				color: blue;
    				width: 20%
    				text-align: center;
    				}
    			td {
    				color: purple;
    				width: 20%;
    				}
    			thead th {
    				width: 20%;
    				color: red;
    				text-align: left;
    				}
    			table {
    				width: 50%;
    				border: 1px solid black;
    				}
    			tbody {
    				width: 100%;
    				height: 100px;       /* Just for the demo          */
    				overflow-y: auto;    /* Trigger vertical scroll    */
    				overflow-x: hidden;  /* Hide the horizontal scroll */
    				}
    		</style>
    	</head>
    	<body>
    	<table>
    			<thead>
    				<th>Head 1</th>
    				<th>Head 2</th>
    				<th>Head 3</th>
    				<th>Head 4</th>
    				<th>Head 5</th>
    				<th>&nbsp;&nbsp;&nbsp;</th>
    			</tr>
    		<tbody>
    			<tr>
    				<td>Content 1</td>
    				<td>Content 2</td>
    				<td>Content 3</td>
    				<td>Content 4</td>
    				<td>Content 5</td>
    				<td>&nbsp;&nbsp;&nbsp;</td>
    			</tr>
    			<tr>
    				<td>Content 1</td>
    				<td>Content 2</td>
    				<td>Content 3</td>
    				<td>Content 4</td>
    				<td>Content 5</td>
    				<td>&nbsp;&nbsp;&nbsp;</td>
    			</tr>
    			<tr>
    				<td>Content 1</td>
    				<td>Content 2</td>
    				<td>Content 3</td>
    				<td>Content 4</td>
    				<td>Content 5</td>
    				<td>&nbsp;&nbsp;&nbsp;</td>
    			</tr>
    			<tr>
    				<td>Content 1</td>
    				<td>Content 2</td>
    				<td>Content 3</td>
    				<td>Content 4</td>
    				<td>Content 5</td>
    				<td>&nbsp;&nbsp;&nbsp;</td>
    			</tr>
    			<tr>
    				<td>Content 1</td>
    				<td>Content 2</td>
    				<td>Content 3</td>
    				<td>Content 4</td>
    				<td>Content 5</td>
    				<td>&nbsp;&nbsp;&nbsp;</td>
    			</tr>
    			<tr>
    				<td>Content 1</td>
    				<td>Content 2</td>
    				<td>Content 3</td>
    				<td>Content 4</td>
    				<td>Content 5</td>
    				<td>&nbsp;&nbsp;&nbsp;</td>
    			</tr>
    			<tr>
    				<td>Content 1</td>
    				<td>Content 2</td>
    				<td>Content 3</td>
    				<td>Content 4</td>
    				<td>Content 5</td>
    				<td>&nbsp;&nbsp;&nbsp;</td>
    			</tr>
    			<tr>
    				<td>Content 1</td>
    				<td>Content 2</td>
    				<td>Content 3</td>
    				<td>Content 4</td>
    				<td>Content 5</td>
    				<td>&nbsp;&nbsp;&nbsp;</td>
    			</tr>
    			<tr>
    				<td>Content 1</td>
    				<td>Content 2</td>
    				<td>Content 3</td>
    				<td>Content 4</td>
    				<td>Content 5</td>
    				<td>&nbsp;&nbsp;&nbsp;</td>
    			</tr>
    			<tr>
    				<td>Content 1</td>
    				<td>Content 2</td>
    				<td>Content 3</td>
    				<td>Content 4</td>
    				<td>Content 5</td>
    				<td>&nbsp;&nbsp;&nbsp;</td>
    			</tr>
    			<tr>
    				<td>Content 1</td>
    				<td>Content 2</td>
    				<td>Content 3</td>
    				<td>Content 4</td>
    				<td>Content 5</td>
    				<td>&nbsp;&nbsp;&nbsp;</td>
    			</tr>
    			<tr>
    				<td>Content 1</td>
    				<td>Content 2</td>
    				<td>Content 3</td>
    				<td>Content 4</td>
    				<td>Content 5</td>
    				<td>&nbsp;&nbsp;&nbsp;</td>
    			</tr>
    			<tr>
    				<td>Content 1</td>
    				<td>Content 2</td>
    				<td>Content 3</td>
    				<td>Content 4</td>
    				<td>Content 5</td>
    				<td>&nbsp;&nbsp;&nbsp;</td>
    			</tr>
    			<tr>
    				<td>Content 1</td>
    				<td>Content 2</td>
    				<td>Content 3</td>
    				<td>Content 4</td>
    				<td>Content 5</td>
    				<td>&nbsp;&nbsp;&nbsp;</td>
    			</tr>
    			<tr>
    				<td>Content 1</td>
    				<td>Content 2</td>
    				<td>Content 3</td>
    				<td>Content 4</td>
    				<td>Content 5</td>
    				<td>&nbsp;&nbsp;&nbsp;</td>
    			</tr>
    			<tr>
    				<td>Content 1</td>
    				<td>Content 2</td>
    				<td>Content 3</td>
    				<td>Content 4</td>
    				<td>Content 5</td>
    				<td>&nbsp;&nbsp;&nbsp;</td>
    			</tr>
    			<tr>
    				<td>Content 1</td>
    				<td>Content 2</td>
    				<td>Content 3</td>
    				<td>Content 4</td>
    				<td>Content 5</td>
    				<td>&nbsp;&nbsp;&nbsp;</td>
    			</tr>
    			<tr>
    				<td>Content 1</td>
    				<td>Content 2</td>
    				<td>Content 3</td>
    				<td>Content 4</td>
    				<td>Content 5</td>
    				<td>&nbsp;&nbsp;&nbsp;</td>
    			</tr>
    			<tr>
    			</tr>
    				<td>Content 1</td>
    				<td>Content 2</td>
    				<td>Content 3</td>
    				<td>Content 4</td>
    				<td>Content 5</td>
    				<td>&nbsp;&nbsp;&nbsp;</td>
    			</tr>
    			<tr>
    				<td>Content 1</td>
    				<td>Content 2</td>
    				<td>Content 3</td>
    				<td>Content 4</td>
    				<td>Content 5</td>
    				<td>&nbsp;&nbsp;&nbsp;</td>
    			</tr>
    			<tr>
    				<td>Content 1</td>
    				<td>Content 2</td>
    				<td>Content 3</td>
    				<td>Content 4</td>
    				<td>Content 5</td>
    				<td>&nbsp;&nbsp;&nbsp;</td>
    			</tr>
    			<tr>
    				<td>Content 1</td>
    				<td>Content 2</td>
    				<td>Content 3</td>
    				<td>Content 4</td>
    				<td>Content 5</td>
    				<td>&nbsp;&nbsp;&nbsp;</td>
    			</tr>
    			<tr>
    				<td>Content 1</td>
    				<td>Content 2</td>
    				<td>Content 3</td>
    				<td>Content 4</td>
    				<td>Content 5</td>
    				<td>&nbsp;&nbsp;&nbsp;</td>
    			</tr>
    			<tr>
    				<td>Content 1</td>
    				<td>Content 2</td>
    				<td>Content 3</td>
    				<td>Content 4</td>
    				<td>Content 5</td>
    				<td>&nbsp;&nbsp;&nbsp;</td>
    			</tr>
    			<tr>
    				<td>Content 1</td>
    				<td>Content 2</td>
    				<td>Content 3</td>
    				<td>Content 4</td>
    				<td>Content 5</td>
    				<td>&nbsp;&nbsp;&nbsp;</td>
    			</tr>
    			<tr>
    				<td>Content 1</td>
    				<td>Content 2</td>
    				<td>Content 3</td>
    				<td>Content 4</td>
    				<td>Content 5</td>
    				<td>&nbsp;&nbsp;&nbsp;</td>
    			</tr>
    			<tr>
    				<td>Content 1</td>
    				<td>Content 2</td>
    				<td>Content 3</td>
    				<td>Content 4</td>
    				<td>Content 5</td>
    				<td>&nbsp;&nbsp;&nbsp;</td>
    			</tr>
    			<tr>
    				<td>Content 1</td>
    				<td>Content 2</td>
    				<td>Content 3</td>
    				<td>Content 4</td>
    				<td>Content 5</td>
    				<td>&nbsp;&nbsp;&nbsp;</td>
    			</tr>
    			<tr>
    				<td>Content 1</td>
    				<td>Content 2</td>
    				<td>Content 3</td>
    				<td>Content 4</td>
    				<td>Content 5</td>
    				<td>&nbsp;&nbsp;&nbsp;</td>
    			</tr>
    			<tr>
    				<td>Content 1</td>
    				<td>Content 2</td>
    				<td>Content 3</td>
    				<td>Content 4</td>
    				<td>Content 5</td>
    				<td>&nbsp;&nbsp;&nbsp;</td>
    			</tr>
    			<tr>
    				<td>Content 1</td>
    				<td>Content 2</td>
    				<td>Content 3</td>
    				<td>Content 4</td>
    				<td>Content 5</td>
    				<td>&nbsp;&nbsp;&nbsp;</td>
    			</tr>
    		</tbody>
    			<tr class="foot">
    				<td>Footer 1</td>
    				<td>Footer 2</td>
    				<td>Footer 3</td>
    				<td>Footer 4</td>
    				<td>Footet 5</td>
    				<td>&nbsp;&nbsp;&nbsp;</td>
    			</tr>
    </table>
    
    </body>
    </html>
    
    You may want to tidy up the additional 'empty' column with some CSS properties, it's there in the demo as a 'tweak' just to make the 'head' and 'foot' align because of the additional apace the scroll bar takes up inside the tbody.
     

Share This Page