#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    27
    Rep Power
    0

    Freezing the top header row in an html table


    Hello,

    I need the help of the experts on this forum,

    How can the css coding below be modified, such that the first row (top header) is froze?

    (The code needs to be IE7 Compliant)

    CSS:
    Code:
    table.dataTable {
        margin: 0;
        padding: 0;
    	border-bottom: 1px solid #999;
    	border-left: 1px solid #999;
    	color: #235A81;
    	font-family: Arial;
    	font-size: 9pt;
    }
    table.dataTable th {
        margin: 0;
    	border-right: 1px solid #999;
    	border-top: 1px solid #999;
    	font-weight: normal;
    	padding: 4px 3px 3px 4px;
    	background: #ccc;
    	font-weight: bold;
    	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#cdcdcd");
    	text-align: left;
    	width: 150px;
    }
    
    table.dataTable td {
        margin: 0;
    	border-right: 1px solid #999;
    	border-top: 1px solid #999;	
        padding: 2px 3px 3px 4px
    }
    
    
    div.scrollTableContainer {
    	height: 285px;	
        overflow: auto;
    	width: 900px;
    	margin: 15px 0 0 0;
    	position: relative;
    }
    
    div.scrollTableContainer table {
    	width: 952px;
    }
    
    div.scrollTableContainer TABLE THEAD TR {
    
    }
    
    div.scrollTableContainer td:last-child {padding-right: 20px;}
    
    div.scrollTableContainer tr:first-child td { border-top: 0; }
    
    div.scrollTableContainer thead th {	border-bottom: 1px solid #999; }
    Here's a working fiddle: http://jsfiddle.net/Uamhc/

    Thanks again for all and everyones help in advance.

    Cheers,

    Jay
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Location
    Troy, NY
    Posts
    46
    Rep Power
    68

    Fixed Table Headers?


    Hi Jay,
    If you mean having fixed table headings then you sadly you will need to use javascript.

    This plugin will do the trick if thats what you need:

    http://fixedheadertable.com/

IMN logo majestic logo threadwatch logo seochat tools logo