Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
<table id="tableAppointment" bgcolor="#fcfcfc" border="1" cellspacing="1" width="100%">
 
        <tr>
            <td class="csstextheader" width="70px"></td>
            <td class="csstextheader" width="70px">
                <b>Time Slot&nbsp;</b>
            </td>
            <td><b>Room 7</b></td>
            <td><b>Room 8</b></td>
            <td><b>Room 9</b></td>
            <td><b>Room 10</b></td>
        </tr>
 

 
        <tr class="csstablelisttd">
            <td width="70px">08:00AM</td>
            <td>00</td>
            <td class="csstdred">John</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
</table>
I have to make fixed header of first row without changing current html.. I m adding style="position:fixed" to every cell of first row. but not getting output ..How it possible
Posted 29-Nov-12 0:29am
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

First Attempt
So, the first option I saw online was to add “overflow-y: auto; display: block; height: 330px;” to the tbody tag. I saw somewhere where this could work with a single column, but with multiple columns, the header is pushed to the right, and the table rows are pushed to the left. I played with this awhile, but never could get it to work.
 

Solution
While not as elegant as I would like, this solution does work. Of course, if you isolate the header and then wrap the data rows in a div with the overflow-y stuff, that would work. However, a datagrid populates the header automatically. You could build another datagrid and mess with that, but jQuery quickly solves the issue. Here’s the plan:
 
•Add a place for the header to be moved outside of the table with the rows where the overflow-y will be used
•Move the header
•Realign the columns
New Markup
This is pretty basic.  I added a table just before the table with data in it.  This will hold the header.  I also styled the div to allow for scrolling.
 

<table id="MyHeader"></table>
 
<div style="overflow-y: auto; height: 330px;">
 
  <table id="MyDataRows">
 
    <thead>
      <tr class="grid_header">
        <th>Col1</th>
        <th>Col2</th>
        <th>Col3</th>
      </tr>
    </thead>
 
    <tbody>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
    </tbody>
  </table>
 
</div>
jQuery Code
 
<script type="text/javascript">// <![CDATA[
$(function () {
    /* move the table header from the datagrid outside, so it doesn't scroll" */
    $("#MyHeader").append($("#StudentData thead"));
    $("#MyDataRows").css("margin-bottom", "0");
 
    var ths = $("#MyHeader th");
    var tds = $("#MyDataRows tr:first td");
 
    /* Reset the padding of the th's to match the td's */
    ths.css("padding-left", tds.first().css("padding-left"));
    ths.css("padding-right", tds.first().css("padding-right"));
 
    /* Set the widths of all the th's (except the last to acccount for scroll bar) to the corresponding td width */
    for (var i = 0; i < tds.length - 1; i++) {
        ths.eq(i).width(tds.eq(i).width());
    }
});
// ]]></script>
Final Markup
So, the end result is two tables whose column widths match but which function as a scrollable datagrid table with a fixed header.
 

<table id="MyHeader">
  <thead>
    <tr class="grid_header">
      <th>Col1</th>
      <th>Col2</th>
      <th>Col3</th>
    </tr>
  </thead>
</table>
 
<div style="overflow-y: auto; height: 330px;">
 
  <table id="MyDataRows">
 
    <tbody>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
    </tbody>
 
  </table>
 
</div>
  Permalink  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

You can try this:
 
<table style="width: 300px" cellpadding="0" cellspacing="0">
<tr>
  <td>Header 1</td>
  <td>Header2 2</td>
</tr>
</table>
 
<div style="overflow: auto;height: 100px; width: 320px;">
  <table style="width: 300px;" cellpadding="0" cellspacing="0">
  <tr>
    <td>First Value</td>
    <td>Second Value</td>
  </tr>
<tr>
    <td>First Value</td>
    <td>Second Value</td>
  </tr>
 
<tr>
    <td>First Value</td>
    <td>Second Value</td>
  </tr>
 
<tr>
    <td>First Value</td>
    <td>Second Value</td>
  </tr>
 
<tr>
    <td>First Value</td>
    <td>Second Value</td>
  </tr>
 

<tr>
    <td>First Value</td>
    <td>Second Value</td>
  </tr>
 

<tr>
    <td>First Value</td>
    <td>Second Value</td>
  </tr>
 

<tr>
    <td>First Value</td>
    <td>Second Value</td>
  </tr>
 

   </table>
</div>
  Permalink  
Comments
NikhildPawar at 29-Nov-12 8:06am
   
Dont do with two table
NikhildPawar at 29-Nov-12 8:06am
   
without chnging html
Raman Thakur at 30-Nov-12 2:45am
   
I got code on http://tycoontalk.freelancer.com/css-forum/114586-variable-width-scrolling-table-fixed-header.html and i guess it would work for you <html> <head> <title>Untitled Page</title> <style type="text/css"> .Container { margin-left: 200px; background-color: green; overflow: scroll; overflow-x: hidden; height: 200px; } .BigTable { width: 100%; } .BigTable td { width: 40%; } .BigTable td + td { width: 30%; } .BigTable td + td + td { width: 30%; } .Header { margin-left: 200px; height: 30px; background-color: blue; } .Header .Heading { width: 40%; float: left; height: 30px; } .Header .Heading + .Heading { width: 30%; } .Header .Heading + .Heading + .Heading { width: 30%; } </style> </head> <body> <div class="Header"> <div class="Heading">Heading 1</div> <div class="Heading">Heading 2</div> <div class="Heading">Heading 3</div> </div> <div class="Container"> <table class="BigTable"> <tbody class="scrollContent"> <tr class="normalRow"> <td>Cell Content 1</td> <td>Cell Content 2</td> <td>Sep 16, 2007 01:54 AM</td> </tr> <tr class="alternateRow"> <td>More Cell Content 1</td> <td>More Cell Content 2</td> <td>Sep 16, 2007 01:54 AM</td> </tr> <tr class="normalRow"> <td>Even More Cell Content 1</td> <td>Even More Cell Content 2</td> <td>Sep 16, 2007 01:54 AM</td> </tr> <tr class="alternateRow"> <td>And Repeat 1</td> <td>And Repeat 2</td> <td>Sep 16, 2007 01:54 AM</td> </tr> </tr> <tr class="alternateRow"> <td>And Repeat 1</td> <td>And Repeat 2</td> <td>Sep 16, 2007 01:54 AM</td> </tr> </tr> <tr class="alternateRow"> <td>And Repeat 1</td> <td>And Repeat 2</td> <td>Sep 16, 2007 01:54 AM</td> </tr> </tr> <tr class="alternateRow"> <td>And Repeat 1</td> <td>And Repeat 2</td> <td>Sep 16, 2007 01:54 AM</td> </tr> </tr> <tr class="alternateRow"> <td>And Repeat 1</td> <td>And Repeat 2</td> <td>Sep 16, 2007 01:54 AM</td> </tr> </tbody> </table> </div> </body> </html>

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Your Filters
Interested
Ignored
     
0 Guruprasad.K.Basavaraju 490
1 Shai Vashdi 339
2 Sergey Alexandrovich Kryukov 291
3 Peter Leow 135
4 praveen_07 115
0 Sergey Alexandrovich Kryukov 9,185
1 OriginalGriff 5,335
2 Peter Leow 4,040
3 Maciej Los 3,540
4 Abhinav S 3,308


Advertise | Privacy | Mobile
Web01 | 2.8.140415.2 | Last Updated 29 Nov 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Use
Layout: fixed | fluid