Click here to Skip to main content
12,696,493 members (30,691 online)
Rate this:
 
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 1: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 29-Nov-12 8:06am
   
Dont do with two table
NikhildPawar 29-Nov-12 8:06am
   
without chnging html
Raman Thakur 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
Top Experts
Last 24hrsThis month


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

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100