[Umi Sakurai]

Hi there! I just ant to ask for a help regarding fixed header. I was been required by my boss in the company where I'm working for me to create a fixed table head so that it will not be tough for them to know what column name is they looking at when they already scroll down. As the time I'm doing it, I always got a problem in making the width of the thead match to the width of tbody no matter how or what code I use. The table have 43 columns. I read in one article that it is hard to adjust the size of the table when it contains many columns? If that so, how can I create a fixed header in a table with 43 columns? or is there any alternative thing that does what fixed header do also? Thanks to those who can give advise.

[Wickham]

Have you tried another table with position: fixed for the table tag and 43 td tags (or th tags) with the column headings and place this extra fixed table before the main table in the html markup?

CSS:-

#tablefixed { position: fixed; top: 0; background: #eee; }

HTML markup (I've only shown two td tags, just repeat for 43):-

<table id="tablefixed">
<tr>
<td>First column heading text</td>
<td>Second column heading text</td>
</tr></table>

It should sit at the top of the page over your other table. If the main table is centered you will have to add similar styles to the above table to make it sit directly over the main table. You will also have to size the td tags to be the same as the td tag widths in the main table.

This post has been edited by Wickham: 02 February 2012 - 08:15 AM

[Umi Sakurai]

You mean two tables? Yes. That's the first thing I did before but just the same, the two tables didn't match each others' width. By the way, I forgot to tell that the one that filling the rows of each columns are data from php database, means the table are stretching depends on the length of the data input. That's what I think. So, how can I make a fixed header that will stretch its width depends on its body or another tables columns? Or is there any alternative thing that does what fixed header do also? Thanks again to those who can give advise and to Wickham who already give his advice

[Wickham]

I didn't realise that your main table had fluid td tag widths, so of course an extra table above won't have matching widths.

I think you will have to add fixed widths to the main and extra table for the td tags for the headings to line up with the td tag columns in the main table. You can do this in the PHP code. Somewhere in the PHP code that extracts the data from the database you should have a chance to code at least a fixed width for all columns or possibly varying widths with different classes.

If you look at this tutorial
http://www.wickham43...mphptomysql.php
at the bottom is a table with data extracted from a database and all columns (except one) have a fixed width and data from the database fits into them.

You should be able to make the widths fixed and then make the extra table with position: fixed and the same td tag widths to show on top. In fact, looking closely at the tutorial, The headings ARE coded in a separate table, but outside the PHP/MySQL data part of the code, and use the same classes for td widths. You need to separate this part with the headings and give position: fixed; top: 0; in the separate table.

This post has been edited by Wickham: 03 February 2012 - 07:31 AM

[Umi Sakurai]

Thanks for your reply.. I'll try to do it and post here what is the result

[Glowbridge]

http://css-tricks.co...d-highlighting/

[Umi Sakurai]

I already do what you have told but the ending is the table column just follow the width of the text inside it even though I make it 500px, it was still the same width!

[Umi Sakurai]

This is the code:

(i hope posting code like this are not forbidden)

<?php
session_start();
include "includes/variables.php";
$filter = $_GET['id'];
$dl = 0;
if ($export == 'Export To Excel') {
$dl = 1;


$export_file = "report.xls";
ob_end_clean();
ini_set('zlib.output_compression','Off');

header('Pragma: public');
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past
header('Last-Modified: '.gmdate('D, d M Y H:i:s') . ' GMT');
header('Cache-Control: no-store, no-cache, must-revalidate'); // HTTP/1.1
header('Cache-Control: pre-check=0, post-check=0, max-age=0'); // HTTP/1.1
header ("Pragma: no-cache");
header("Expires: 0");
header('Content-Transfer-Encoding: none');
header('Content-Type: application/vnd.ms-excel;'); // This should work for IE & Opera
header("Content-type: application/x-msexcel"); // This should work for the rest
header('Content-Disposition: attachment; filename="'.basename($export_file).'"');

}


if (!$dl) {
?>
<script language="JavaScript" src="js/jquery.js"></script>
<script>
function viewData(id)
{
window.open('viewdata.php?id=' + id);

}

function filterShow(val)
{
$('.empStatus').show();
$('.medicalStatus').show();

$('.crewDocStatus').show();
$('.flagstateStatus').show();
$('.poeaStatus').show();
$('.standardStatus').show();

$('.tblList').attr('width','8000px');
if (val == 1) {
$('.medicalStatus').hide();
$('.crewDocStatus').hide();
$('.flagstateStatus').hide();
$('.poeaStatus').hide();
$('.standardStatus').hide();
$('.tblList').attr('width','1500');
}

if (val == 2) {
$('.empStatus').hide();
$('.crewDocStatus').hide();
$('.flagstateStatus').hide();
$('.poeaStatus').hide();
$('.standardStatus').hide();
$('.tblList').attr('width','2800');
}

if (val == 3) {
$('.medicalStatus').hide();
$('.empStatus').hide();
$('.flagstateStatus').hide();
$('.poeaStatus').hide();
$('.standardStatus').hide();
$('.tblList').attr('width','1500');
}

if (val == 4) {
$('.medicalStatus').hide();
$('.empStatus').hide();
$('.crewDocStatus').hide();
$('.poeaStatus').hide();
$('.standardStatus').hide();
$('.tblList').attr('width','1500');
}

if (val == 5) {
$('.medicalStatus').hide();
$('.empStatus').hide();
$('.crewDocStatus').hide();
$('.flagstateStatus').hide();
$('.standardStatus').hide();
$('.tblList').attr('width','1500');
}

if (val == 6) {
$('.medicalStatus').hide();
$('.empStatus').hide();
$('.crewDocStatus').hide();
$('.flagstateStatus').hide();
$('.poeaStatus').hide();
$('.tblList').attr('width','1500');
}


}

function filterList(val)
{
$('#show').val('');
var d = new Date();
var timex = d.getTime();
var data = $("#red").serialize();
var ctner = '#divFilter';
document.getElementById('divFilter').innerHTML = "<img src='images/loading.gif' border='0'>";
$.post('filter.php', data, function(data) {
$(ctner).html(data);
});

}

</script>
<table width="4000px" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#FFFFFF" class='tblList'>
<!-- HEADER START -->
<tr>
<td colspan="2"><img src="images/banner.jpg" alt="header" width="800" height="185" /></td>
</tr>
<tr>
<td colspan="2" bgcolor="#FF0000" style="height: 3px;"></td>
</tr>
<tr>
<td >
<a href="upcoming.php" style="text-decoration:none;">
<font color='#FF0000' size="4px" face="Georgia, Arial, Helvetica, sans-serif">Back</font></a>
<br />

<form name="red" id="red" method="post" ENCTYPE = "multipart/form-data" >
<div style="padding:10px 10px";>
Filter:
&nbsp;&nbsp;Surname:
<?php
echo buildElement('text','fname','','',"onkeyup='filterList(this.value);'");
?>
Show:
<?php
$list = '1:Crew Employment Status:2:Crew Medical Status:3:Crew Doc Start:4:Flagstate:5:POEA Contract:6:Standard Visa:';
echo buildSelect('show', $list, 2, '',"onchange=\"checkedAll('red', 1); filterShow(this.value);\"");

?>
&nbsp;
<input type='submit' name='export' value='Export To Excel' />
<br /><br />
<script>
function checkedAll(frmName, flag, exception)
{
var checked = false;
if (flag == 1) {
checked = true;
} else {
checked = false;
}
for (var i = 0; i < document.getElementById(frmName).elements.length; i++) {
if(exception != document.getElementById(frmName).elements[i].name) {
document.getElementById(frmName).elements[i].checked = checked;
}
}
}
function filterColumns(id)
{
var state = id.checked;
var val = id.value;
$('.col' + val).show();
if (!state) {
$('.col' + val).hide();
}
}
function filterShowColumns(flag)
{
checkedAll('red', flag);

for (var i = 1; i < 19; i++) {
if (flag == 1) {
$('.col' + i).show();
} else {
$('.col' + i).hide();
}
}


}
</script>

</div>
</form>

</td>
</tr>
</table>
<?php
}
?>

<div id='divFilter' style="padding-top:10px";>
<table width='4000px' border="1" cellspacing="3" cellpadding="1" align="center" bgcolor="#FFFFFF" class='tblList'>
<tr>
<td width='20px'>No</td>
<?php
if ($show == 1 || $show == '') {
?>
<td width='100px'class='empStatus col1'>Rank</td>
<td width='300px' class='empStatus col2'>Repat Crew</td>
<?php
}
?>
<td width='100px'>Rank</td>
<td width='300px'>Join Crew</td>
<td width='20px' >Age</td>
<?php
if ($show == 3 || $show == '') {
?>
<td width='200px'class='crewDocStatus col3'>Date Reported for Doc</td>

<?php
}
if ($show == 1 || $show == '') {
?>
<td width='200px'class='empStatus col3'>Approved Date</td>
<td width='200px'class='empStatus col9'>Date Request to Report</td>
<td width='200px'class='empStatus col4'>Crew Status</td>

<td width='200px'>Target Vessel</td>
<td width='200px'class='empStatus col5'>Proposed Date</td>
<td width='200px'class='empStatus col6'>Joining Date</td>
<td width='200px'class='empStatus col7'>Joining Port</td>
<td width='200px'class='empStatus col8'>Remarks</td>

<?php
}
if ($show == 2 || $show == '') {
?>
<td width='200px' class='medicalStatus col9'>Referral Date</td>

<td width='200px' class='medicalStatus col10'>Date Fit to Work</td>
<td width='200px' class='medicalStatus col11'>PEME Type</td>
<td width='200px' class='medicalStatus col12'>Reason For PEME</td>
<td width='200px' class='medicalStatus col13'>Charge To</td>
<td width='200px' class='medicalStatus col14'>Medical Status</td>
<td width='200px' class='medicalStatus col15'>Yellow Fever Issued Date</td>
<td width='200px' class='medicalStatus col16'>Yellow Fever Validity Date</td>
<td width='200px' class='medicalStatus col17'>Cholera Issued Date</td>
<td width='200px' class='medicalStatus col18'>Cholera Fever Validity Date</td>
<?php
}

if ($show == 3 || $show == '') {
?>
<td width='200px'class='crewDocStatus col3'>With Blue Form</td>
<td width='200px'class='crewDocStatus col3'>Date Dispatch</td>
<td width='200px'class='crewDocStatus col3'>Deficient Certificates</td>
<td width='200px'class='crewDocStatus col3'>Remarks</td>

<?php
}
if ($show == 4 || $show == '') {
?>
<td width='200px'class='flagstateStatus col3'>Flagstate</td>
<td width='200px'class='flagstateStatus col3'>Date Submitted</td>
<td width='200px'class='flagstateStatus col3'>Date Released Temp</td>
<td width='200px'class='flagstateStatus col3'>Flagstate Status</td>
<?php
}
if ($show == 5 || $show == '') {
?>
<td width='200px'class='poeaStatus col3'>Date Signed Contract</td>
<td width='200px'class='poeaStatus col3'>Date Processed Contract</td>
<td width='200px'class='poeaStatus col3'>Other Visa Requirements</td>
<td width='200px'class='poeaStatus col3'>Date Processed</td>
<td width='200px'class='poeaStatus col3'>Date Released</td>
<td width='200px'class='poeaStatus col3'>Remarks</td>
<?php
}
if ($show == 6 || $show == '') {
?>
<td width='200px'class='standardStatus col3'>Visa</td>
<td width='200px'class='standardStatus col3'>Date Crew Oriented</td>
<td width='200px'class='standardStatus col3'>Appointment Schedule</td>
<td width='200px'class='standardStatus col3'>Result: Visa Type</td>
<td width='200px'class='standardStatus col3'>Validity</td>
<?php
}
?>
<td></td>

</tr>

<?php
$filterName = '';
if (!empty($fname)) {
$filterName = " AND surname LIKE '$fname%'";
}

$db->sqlSelect(TBL_CREW . ' a LEFT JOIN ' . TBL_APPROVE . ' b ON a.crew_id=b.crew_id', "1 $filterName ORDER BY b.target_vessel",'*',0);
$result = $db->outQuery;


while ($res = mysql_fetch_assoc($result)) {

$norow++;
if (is_file('tablecolor.php')) {
include 'tablecolor.php';
} else {
include '../tablecolor.php';
}
$joinRank = getValueFromDb(TBL_RANK,'rank',$res['rank'], 'rank_id');

$id = $res['crew_id'];
$db->sqlSelect(TBL_APPROVE,"crew_id = '$id'",'*');
$emp = $db->outArray;
$aStatus = $emp["status"];
$aRank = getValueFromDb(TBL_RANK,'rank',$emp['rank'], 'rank_id');
$aRepat = $emp["repat"];

if ($filter != '' && $filter != $emp['target_vessel']) {
$norow--;
continue;
}
$aVessel = getValueFromDb(TBL_VESSEL,'vessel',$emp['target_vessel'], 'vessel_id');
$aProposed = $emp["proposed"];
$aApproved = $emp["approved"];
$aDateRequest = $emp["DateRequest"];
$aJoin = $emp["joining"];
$aPort = $emp["port"];
$aRemarks = $emp["remarks"];


$db->sqlSelect(TBL_MEDICAL,"crew_id = '$id'",'*');
$med = $db->outArray;
$mReferral = $med["referral"];
$mFit = $med["fit_to_work"];
$mPeme = $med["peme"];
$mReason = $med["reason"];
$mCharge = $med["charge"];
$mStat = $med["medical_stat"];
$mYellowIss = $med["yellow_issue"];
$mYellowEx = $med["yellow_expire"];
$mCholIss = $med["cholera_issue"];
$mCholEx = $med["cholera_expire"];


$db->sqlSelect(TBL_CREW_DOC,"crew_id = '$id'",'*');
$oRes = $db->outArray;
$cDateRep = $oRes["date_reported"];
$cBlue = 'No';
if ($oRes["blue_form"]) {
$cBlue = 'Yes';
}
$cDateDis = $oRes["date_dispatch"];
$cDefCer = $oRes["def_cert"];
$cResult = $oRes["remarks"];

echo "<tr bgcolor='$varcolor'>\n";
echo "<td >&nbsp;$norow&nbsp</td>\n";

?>
<?php
if ($show == 1 || $show == '') {
?>
<td class='empStatus col1'><?php echo $aRank; ?></td>
<td class='empStatus col2'><?php echo $aRepat; ?></td>
<?php
}
?>
<td ><?php echo $joinRank; ?></td>
<td ><?php echo $res['surname'], ' ' , $res['firstname']; ?></td>
<td ><?php echo $res['age']; ?></td>
<?php
if ($show == 3 || $show == '') {
?>
<td width='200px'class='crewDocStatus col3'><?php echo $cDateRep; ?></td>
<?php
}
if ($show == 1 || $show == '') {
?>
<td class='empStatus col3'><?php echo $aApproved; ?></td>
<td class='empStatus col9'><?php echo $aDateRequest; ?></td>
<td class='empStatus col4'><?php echo $aStatus; ?></td>

<td ><?php echo $aVessel; ?></td>
<td class='empStatus col5'><?php echo $aProposed; ?></td>
<td class='empStatus col6'><?php echo $aJoin; ?></td>
<td class='empStatus col7'><?php echo $aPort; ?></td>
<td class='empStatus col8'><?php echo $aRemarks; ?></td>

<?php
}
if ($show == 2 || $show == '') {
?>
<td class='medicalStatus col9'><?php echo $mReferral; ?></td>
<td class='medicalStatus col10'><?php echo $mFit; ?></td>
<td class='medicalStatus col11'><?php echo $mPeme; ?></td>
<td class='medicalStatus col12'><?php echo $mReason; ?></td>
<td class='medicalStatus col13'><?php echo $mCharge; ?></td>
<td class='medicalStatus col14'><?php echo $mStat; ?></td>
<td class='medicalStatus col15'><?php echo $mYellowIss; ?></td>
<td class='medicalStatus col16'><?php echo $mYellowEx; ?></td>

<td class='medicalStatus col7'><?php echo $mCholIss; ?></td>
<td class='medicalStatus col8'><?php echo $mCholEx; ?></td>
<?php
}
if ($show == 3 || $show == '') {


?>
<td width='200px'class='crewDocStatus col3'><?php echo $cBlue; ?></td>
<td width='200px'class='crewDocStatus col3'><?php echo $cDateDis; ?></td>
<td width='200px'class='crewDocStatus col3'><?php echo $cDefCer; ?></td>
<td width='200px'class='crewDocStatus col3'><?php echo $cResult; ?></td>

<?php
}
if ($show == 4 || $show == '') {

$db->sqlSelect(TBL_FLAGSTATE,"crew_id = '$id'",'*');
$fRes = $db->outArray;
$fState = $fRes["flagstate"];
$fSub = $fRes["date_submitted"];
$fRel = $fRes["date_released"];
$fState = $fRes["flag_stat"];
?>
<td width='200px'class='flagstateStatus col3'><?php echo $fState; ?></td>
<td width='200px'class='flagstateStatus col3'><?php echo $fSub; ?></td>
<td width='200px'class='flagstateStatus col3'><?php echo $fRel; ?></td>
<td width='200px'class='flagstateStatus col3'><?php echo $fState; ?></td>
<?php
}
if ($show == 5 || $show == '') {

$db->sqlSelect(TBL_POEA,"crew_id = '$id'",'*');
$pRes = $db->outArray;
$pSign = $pRes["date_signed"];
$pProcCon = $pRes["date_process_contract"];
$pOther = $pRes["other_visa_reqt"];
$pProc = $pRes["date_process"];
$pRel = $pRes["date_release"];
$pRem = $pRes["remarks"];

?>
<td width='200px'class='poeaStatus col3'><?php echo $pSign; ?></td>
<td width='200px'class='poeaStatus col3'><?php echo $pProcCon; ?></td>
<td width='200px'class='poeaStatus col3'><?php echo $pOther; ?></td>
<td width='200px'class='poeaStatus col3'><?php echo $pProc; ?></td>
<td width='200px'class='poeaStatus col3'><?php echo $pRel; ?></td>
<td width='200px'class='poeaStatus col3'><?php echo $pRem; ?></td>
<?php
}
if ($show == 6 || $show == '') {

$db->sqlSelect(TBL_STANDARD,"crew_id = '$id'",'*');
$sRes = $db->outArray;
$sVisa = $sRes["visa"];
$sOrient = $sRes["date_oriented"];
$sSched = $sRes["app_sched"];
$sType = $sRes["result_type"];
$sVal = $sRes["validity"];


?>
<td width='200px'class='standardStatus col3'><?php echo $sVisa; ?></td>
<td width='200px'class='standardStatus col3'><?php echo $sOrient; ?></td>
<td width='200px'class='standardStatus col3'><?php echo $sSched; ?></td>
<td width='200px'class='standardStatus col3'><?php echo $sType; ?></td>
<td width='200px'class='standardStatus col3'><?php echo $sVal; ?></td>
<?php
}
?>
</tr>
<?php
}
?>
</table>


</div>

this code is not mine but to the first programmer. I try everything I search in how to create fix header here but nothing happens. Can someone here try and help me?Thanks in advance

[Glowbridge]

You've peaked my interest.

Really the only thing I can think of as a solution is some kind of jQuery effect. Give every column the same fixed width, hide overflow. Then when a cell is hovered over just widen the whole column with jQuery.

You're only other real alternative is to re-do all the PHP so it spits out <divs> and fake up a table and headers by floating it all.

This post has been edited by Glowbridge: 06 February 2012 - 10:28 AM

[Synjyn]

jQuery is probably your best option if the table is fluid rather than fixed column widths, something like -> http://fixedheadertable.com/

[Umi Sakurai]

Okay... I'll try all your suggestion and I will post the result after... Thanks again