Make a fixed first row header
<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 </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> </td> <td> </td> <td> </td> </tr> </table> </div> call onload window
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 need to make a fixed header for the first line. I add style="position:fixed" to each cell of the first row. but not getting a way out .. how is this possible
Hey, you can even use a simple jquery function that will give you the result without changing the 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); jsfiddle working example
I created a simple encoding for your question. Please refer to 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 will help you solve your problem.
Note. This is an example of an answer to your question.
If you want to use jQuery, 1st clone table
var clone = $('.tableAppointment').clone() Then remove the part in the clone that is undesirable / does not appear in the fixed header, which will be the clone
clone.remove('.csstablelisttd') Then hide / delete the part that needs to be fixed in the table so as not to mess when both headers (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 (in front of 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 a fixed CSS CSS style and place if before the original header
clone.css({position: fixed}).insertBefore('.beforeHeader') Basically, you created two headers, deleted the part that is suppost, which should be fixed from one, and deleted the part that should not be fixed from the other, and displayed both together without losing their style, only this time one table is fixed, one with the necessary rows
Try:
<thead> <tr style="position: fixed; background-color: grey;"> <td class="csstextheader" width="70px"></td> <td class="csstextheader" width="70px"> <b>Time Slot </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 the first row as a fixed position and add width for all cells using css, it will be fine