It appears you have not yet registered with DEVPPL. To register please click here... (it's fast, easy and free!)

Forum

Log In Sponsors
Board index ‹ Programming ‹ HTML Forum

FIXED FOOTER IN A TABLE

Post a reply

FIXED FOOTER IN A TABLE

Postby guitar on Tue May 29, 2007 9:27 am

Hi,

How do i make my footer stable??? pls Help

<HTML>
<DIV style="width: 180 px;height:200 px;overflow:scroll">
<TABLE style="border: #003399 1px solid;background-color: #003399">
<tr style="position:relative;top: expression(ignoreme=this.offsetParent.scrollTop-3);background-color: #003399;font-family: Verdana, Tahoma, Arial, "Sans Serif", "Times New Roman";font-size: 8pt;font-weight: bold;color: #ffffff;height: 24px;">
<td align="center">Name</td>
<td align="center">Age</td>
<td align="center">Location</td>
</TR>
<tr style="color: #000000;background-color: #e4e4d7;font-family: Verdana, Tahoma, Arial, "Sans Serif", "Times New Roman";font-size: 8pt;font-weight: normal;height: 20px">
<td align="center">abc</td>
<td align="center">12</td>
<td align="center">loc1</td>
</tr>
<tr style="color: #000000; background-color: #f4f4e7; font-family: Verdana, Tahoma, Arial, "Sans Serif", "Times New Roman"; font-size: 8pt; font-weight: normal; height: 20px">
<td align="center">def</td>
<td align="center">13</td>
<td align="center">loc2</td>
</tr>
<tr style="color: #000000;background-color: #e4e4d7;font-family: Verdana, Tahoma, Arial, "Sans Serif", "Times New Roman";font-size: 8pt;font-weight: normal;height: 20px">
<td align="center">ghi</td>
<td align="center">13</td>
<td align="center">loc3</td>
</tr>
<tr style="color: #000000; background-color: #f4f4e7; font-family: Verdana, Tahoma, Arial, "Sans Serif", "Times New Roman"; font-size: 8pt; font-weight: normal; height: 20px">
<td align="center">jkl</td>
<td align="center">14</td>
<td align="center">loc4</td>
</tr>
<tr style="color: #000000;background-color: #e4e4d7;font-family: Verdana, Tahoma, Arial, "Sans Serif", "Times New Roman";font-size: 8pt;font-weight: normal;height: 20px">
<td align="center">mno</td>
<td align="center">15</td>
<td align="center">loc5</td>
</tr>
<tr style="color: #000000; background-color: #f4f4e7; font-family: Verdana, Tahoma, Arial, "Sans Serif", "Times New Roman"; font-size: 8pt; font-weight: normal; height: 20px">
<td align="center">pqr</td>
<td align="center">16</td>
<td align="center">loc6</td>
</tr>
<tr style="color: #000000;background-color: #e4e4d7;font-family: Verdana, Tahoma, Arial, "Sans Serif", "Times New Roman";font-size: 8pt;font-weight: normal;height: 20px">
<td align="center">stu</td>
<td align="center">16</td>
<td align="center">loc6</td>
</tr>
<tr style="color: #000000; background-color: #f4f4e7; font-family: Verdana, Tahoma, Arial, "Sans Serif", "Times New Roman"; font-size: 8pt; font-weight: normal; height: 20px">
<td align="center">vwx</td>
<td align="center">17</td>
<td align="center">loc7</td>
</tr>
<tr style="color: #000000;background-color: #e4e4d7;font-family: Verdana, Tahoma, Arial, "Sans Serif", "Times New Roman";font-size: 8pt;font-weight: normal;height: 20px">
<td align="center">y</td>
<td align="center">18</td>
<td align="center">loc8</td>
</tr>
<tr style="position: relative;bottom: expression(ignoreme=this.offsetParent.scrollBottom-3);background-color: #003399;font-family: Verdana, Tahoma, Arial, "Sans Serif", "Times New Roman";font-size: 8pt;font-weight: bold;color: #ffffff;height: 24px;">
<td align="center">page</td>
<td align="center">footer</td>
<td align="center">here</td>
</tr>
</TABLE>
</DIV>
</HTML>


Thanks,
Guitar
guitar
 
Posts: 13
Joined: Mon May 07, 2007 5:49 am
Top

Re: FIXED FOOTER IN A TABLE

Postby diaoguoliang on Mon Nov 22, 2010 7:52 am

Code: Select all
<html>
<head>
<style type="text/css">
div.tableContainer {
   width: 500px;      /* table width will be 99% of this*/
   height: 400px;       /* must be greater than tbody*/
   overflow: auto;
   margin: 0 auto;
   }

table {
   width: 600px;      /*100% of container produces horiz. scroll in Mozilla*/
   border: none;
   background-color: #88ee88;
   }
   
table>tbody   {  /* child selector syntax which IE6 and older do not support*/
   overflow: auto;
   height: 585px;
   overflow-x: hidden;
   }
   
thead tr   {
   position:relative;
   top: expression(offsetParent.scrollTop); /*IE5+ only*/
   }
   
thead td, thead th {
   text-align: center;
   font-size: 18px;
   background-color: #eeeeee;
   
   font-weight: bold;
   border-top: solid 1px #d8d8d8;
   border-bottom: solid 1px #d8d8d8;
   border-left: solid 1px #d8d8d8;
   border-right: solid 1px #d8d8d8;
   }   
   
td   {
   
   padding-right: 2px;
   font-size: 16px;
   border-bottom: solid 1px #000000;
   border-left: solid 1px #000000;
   }
   
table tfoot tr { /*idea of Renato Cherullo to help IE*/
      position: relative;
      overflow-x: hidden;
      top: expression(parentNode.parentNode.offsetHeight >=
     offsetParent.offsetHeight ? -17 - parentNode.parentNode.offsetHeight + offsetParent.offsetHeight + offsetParent.scrollTop : 0);
      }


tfoot td   {
   text-align: center;
   font-size: 18px;
   font-weight: bold;
   background-color: #eeeeee;
   
   border-top: solid 1px slategray;
   }

td:last-child {padding-right: 20px;} /*prevent Mozilla scrollbar from hiding cell content*/

</style>
</head>

<body>

<div id="container">

<h2>Scrollable Table with Fixed Header</h2>
<h3>Non-Scrolling Header and Footer_test by diaoguoliang@gmail.com</h3>

<div class="tableContainer">
  <table cellspacing="0">
     <thead>
      <tr>
        <td width="18%">x</td>
        <td width="38%">y</td>

        <td width="28%">z</td>
        <td width="16%">m</td>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <td width="18%">x</td>
        <td width="38%">y</td>

        <td width="28%">z</td>
        <td width="16%">m</td>
      </tr>

    </tfoot>
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
<tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
<tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
<tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
<tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
<tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
<tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
<tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
<tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
<tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
<tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
<tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
<tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
<tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
<tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
<tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
<tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
<tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
<tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
<tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
<tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
<tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
<tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
<tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
<tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
<tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
</tbody>
</table>

</div>
</div>
</html>
diaoguoliang
 
Posts: 1
Joined: Mon Nov 22, 2010 7:47 am
Top
Post a reply

Who is online

Users browsing this forum: No registered users and 11 guests