6

Demo

<div id="divScroll" style="overflow-x: hidden">
    <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>
</div>

call on window onload

function resolutionIndependent()
        {
            var height;
            var tableMain;
            var divScroll;

            if (document.body && document.body.offsetWidth)
            {
                height = document.body.offsetHeight;
            }
            if (document.compatMode == 'CSS1Compat' && document.documentElement && document.documentElement.offsetWidth)
            {
                height = document.documentElement.offsetHeight;
            }
            if (window.innerWidth && window.innerHeight)
            {
                height = window.innerHeight;
            }
            tableMain = document.getElementById('tableMain');
            divScroll = document.getElementById('divScroll');
            tableMain.style.height = parseFloat(height - 170) + 'px';
            divScroll.style.height = parseFloat(height - 170) + 'px';
            divScroll.style.overflow = "auto";
        }
 //***tableMain which is outer table of divScroll***

I have to make fixed header of first row .. I m adding style="position:fixed" to every cell of first row. but not getting output ..How it possible

lax
  • 518
  • 2
  • 11
  • 26
  • 1
    this is not possible without changing your html part if you change your html part that's possible – Rohit Azad Malik Nov 29 '12 at 09:48
  • 1
    as like this http://tinkerbin.com/bcVK0s0N – Rohit Azad Malik Nov 29 '12 at 10:42
  • header coloumn and content coloumn not in same line – lax Nov 29 '12 at 11:15
  • can we give div to tr only because u take 2 tables for fixing header...and i stored id in tr coloumns means room no cells.... – lax Nov 29 '12 at 11:16
  • now set to the header coloumn and text according to your design it eaisy man – Rohit Azad Malik Nov 29 '12 at 11:16
  • possible duplicate of [HTML table with fixed headers?](http://stackoverflow.com/questions/673153/html-table-with-fixed-headers) – kapa Nov 29 '12 at 15:45
  • I have updated my html and demo link – lax Nov 30 '12 at 07:40
  • @lax Your html is not correct. You have used `rowspan` in few rows but missed to exclude the corresponding columns in next row. – Selvakumar Arumugam Dec 03 '12 at 16:33
  • i have done one function to remove those columns..forget that one But how i make fixed headers – lax Dec 04 '12 at 11:23
  • Have to agree. In order for anything to work properly (ESPECIALLY with browser resize) you will have to change *some* of the html. As it stands, there is no easy (or even relatively easy) way to go about this without making it appear hacked together. The fact that you're using percentages makes this much more difficult. The closest solution you'll get is the one bezmegakapa provided and the one Jhene Knights provided (aside from the few errors in it). Can I ask why you don't want to change the html? – ebrandell Dec 06 '12 at 05:57
  • i want using changing html also – lax Dec 06 '12 at 12:12

6 Answers6

8

Hey you can even use a simple jquery function which would give you the result without changing you html code 

var tdWidth = $("#tableAppointment tbody tr td").width();
$("#tableAppointment thead").css({'position': 'fixed','top': '0','left': '-0.2%', 'background-color': '#f94d4d','color': '#FFFFFF','text-align': 'center','width': '100%'});

$("#tableAppointment thead tr th").width(tdWidth);

the working example is jsfiddle

matthewb
  • 864
  • 5
  • 16
7

I have created the simple coding for your question.,Please refer the following to see it in action : http://jsfiddle.net/john_rock/h6hfX/1/

HTML Part :

<table>
<thead>
<tr><th>Head1</th><th>Head2</th><th>Head3</th><th>Head4</th><th>Head5</th><th>Head6</th></tr>
</thead>
<tfoot>
<tr><td>Foot1</td><td>Foot2</td><td>Foot3</td><td>Foot4</td><td>Foot5</td><td>Foot6</td></tr>
</tfoot>
<tbody>
<tr><td>r1c1</td><td>r1c2</td><td>r1c3</td><td>r1c4</td><td>r1c5</td><td>r1c6</td></tr>
<tr><td>r2c1</td><td>r2c2</td><td>r2c3</td><td>r2c4</td><td>r2c5</td><td>r2c6</td></tr>
<tr><td>r3c1</td><td>r3c2</td><td>r3c3</td><td>r3c4</td><td>r3c5</td><td>r3c6</td></tr>
<tr><td>r4c1</td><td>r4c2</td><td>r4c3</td><td>r4c4</td><td>r4c5</td><td>r4c6</td></tr>
<tr><td>r5c1</td><td>r5c2</td><td>r5c3</td><td>r5c4</td><td>r5c5</td><td>r5c6</td></tr>
<tr><td>r6c1</td><td>r6c2</td><td>r6c3</td><td>r6c4</td><td>r6c5</td><td>r6c6</td></tr>
<tr><td>r7c1</td><td>r7c2</td><td>r7c3</td><td>r7c4</td><td>r7c5</td><td>r7c6</td></tr>
<tr><td>r8c1</td><td>r8c2</td><td>r8c3</td><td>r8c4</td><td>r8c5</td><td>r8c6</td></tr>
<tr><td>r9c1</td><td>r9c2</td><td>r9c3</td><td>r9c4</td><td>r9c5</td><td>r9c6</td></tr>
<tr><td>r10c1</td><td>r10c2</td><td>r10c3</td><td>r10c4</td><td>r10c5</td><td>r10c6</td></tr>
<tr><td>r11c1</td><td>r11c2</td><td>r11c3</td><td>r11c4</td><td>r11c5</td><td>r11c6</td></tr>
<tr><td>r12c1</td><td>r12c2</td><td>r12c3</td><td>r12c4</td><td>r12c5</td><td>r12c6</td></tr>
<tr><td>r13c1</td><td>r13c2</td><td>r13c3</td><td>r13c4</td><td>r13c5</td><td>r13c6</td></tr>
<tr><td>r14c1</td><td>r14c2</td><td>r14c3</td><td>r14c4</td><td>r14c5</td><td>r14c6</td></tr>
<tr><td>r15c1</td><td>r15c2</td><td>r15c3</td><td>r15c4</td><td>r15c5</td><td>r15c6</td></tr>
</tbody>
</table>​

CSS Part :

table {width:100%; border:1px solid #000000;}
thead {background-color:#000268;color:#FFFFFF;text-align:center; position:fixed; top:0px;}
thead th { height:50px; width:120px; text-align:center;border-width: 1px;border-style: outset;}
tbody {color:#000000;text-align:center; height:150px; overflow: scroll; margin:0px;}
tbody td { height:60px; width:100px;border-width: 1px;border-style: outset;}
tfoot {background-color:#000268; color:#FFFFFF;text-align:center; position:fixed; bottom:0px;}
tfoot td { height:50px; width:120px; text-align:center;border-width: 1px;border-style: outset;}​

I think this may help you resolve your problem.

Note : This is an Example Answer of your question.

John Peter
  • 2,870
  • 3
  • 27
  • 46
3

If you are to use jQuery, 1st clone the table

var clone  = $('.tableAppointment').clone()

Then remove the part in the clone that is unwanted/not to be displayed in the fixed header which wiil be the clone

clone.remove('.csstablelisttd')

Then hide/remove the part that is supporst to be fixed in the table so as not create a mess , when both headers(the clone and original are displayed) and add a class to the original which we will use to refer to where we want to add the clone(before it)

$('.tableAppointment').remove('.firstrowclassname').addClass('beforeHeader') 
//you have not given the 1st row an ID/class, you need to, for refering in jQuery

Now give the clone the fixed header CSS styling and put if before the original header

clone.css({position: fixed}).insertBefore('.beforeHeader')

What you have basically done is created two headers, removed the part that is suppost to be fixed from one and removed the part that is not to be fixed from the other and displayed both together without losing their styling of the tables, only this time one table is fixed, the one with the desired rows

Knights
  • 1,467
  • 1
  • 16
  • 24
1

can i use css for it ? i have simple answer ... Use :first-child selector like this

thead tr:first-child {
   position:fixed;
}

This is only example not ready to try ... Change it before with your element ... Good luck

Michael Antonius
  • 942
  • 2
  • 11
  • 20
1

Can you use a jQuery plugin like jqGrid?

Also, if the first row is meant to be a header you should use the table header tag th

Toni Toni Chopper
  • 1,833
  • 2
  • 20
  • 29
-3

Try :

 <thead>
    <tr  style="position: fixed; background-color: grey;">
        <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>
</thead>

Make first row as fixed position & add width for all cells with use of css it will make good

Moorthy GK
  • 82
  • 5