CODEWITHSUNDEEP
jqueryasp.nethtmlcss
lax
lax

Reputation: 518

make fixed header of first row

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

Upvotes: 6

Views: 2948

Answers (6)

matthewb
matthewb

Reputation: 864

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

Upvotes: 8

Toni Toni Chopper
Toni Toni Chopper

Reputation: 1851

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

Upvotes: 1

Michael Antonius
Michael Antonius

Reputation: 972

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

Upvotes: 1

John Peter
John Peter

Reputation: 2928

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.

Upvotes: 7

Knights
Knights

Reputation: 1477

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

Upvotes: 3

Moorthy GK
Moorthy GK

Reputation: 82

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

Upvotes: -3

Related Questions