Table Body colums do not match fixed header

[benderulz]

Ok I really need this to work, and I've been beating my head against the wall too long already so any help would be GREATLY appreciated. Everything is working great with code show below except, the column widths in the tbody do not match the column widths in the thead which is a fixed row.

echo '<div class="outer">';
echo '<div class="inner">';

echo '<table>';

echo '<thead><tr><th>' . implode('</th><th>', $rows[0]) . '</th></tr></thead>';

foreach($rows as $key=>$row):
  
		echo '<tbody>';
		echo '<tr class="row">';
		foreach($rows[0] as $field):
			echo '<td scope="row">';
	                echo isset($row[$field]) ? $row[$field] : ' ';
			echo '</td>';
		endforeach;
		echo '</tr>';

endforeach;
echo '</tbody></table></div></div>';

.outer {
position:relative;
overflow:auto;
padding:4em 0 3em 0;
width:100%;
background:#eee;
margin:0 auto 3em auto;
}

.inner {
overflow:auto;
width:105%;
height:9.6em;
background:#eee;
}

.outer thead tr {
position:absolute;
top:1.5em;
height:1.5em;
left:0;
}

.outer th, .outer td {
width:200px; 
text-align:center;
}
.outer th {
background:#724a10; 
color:#fff;
}

.outer .row {
width:200px; 
background:#fff;
}

 

[1DMF]

is there a reason you have absolute positioning on the thead rows?


"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

 

[benderulz]

Isn't that what is holding my header in place when I scroll through the body?

 

[ChrisHirst]

You should use position: fixed for that, and when an element is positioned as absolute or fixed, it is taken out of the document flow and does not affect other elements. So your 'table header' is effectively not part of the table.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum