Scrollable table

RyanReese · February 11, 2010, 9:55pm

Edit:

Footer scollring. One second

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
p {margin:0 0 1em}
table p {margin :0}
.wrap {
	margin:50px 0 0 2&#37;;
	width:95%;
	float:left;
	position:relative;
	height:200px;
	overflow:hidden;
	padding:25px 0 0;
	background:#fffccc;
	border:1px solid #000;
}
.inner {
	width:100%;
	height:200px;
	overflow:auto;
}
table {
	width:100%;
	margin:0 0 0 -1px;
	border-collapse:collapse;
}
td {
	padding:5px;
	border:1px solid #000;
	text-align:center;
	background:yellow;
}
tfoot th, thead th {
	font-weight:bold;
	text-align:left;
	border:1px solid #000;
	padding:0 3px 0 5px;
	background:#ffffcc;
}
thead th {border:none;}
thead tr p {
	position:absolute;
	top:0;
}
.last {
	padding-right:15px!important;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
.inner {overflow-x:hidden}

</style>
<![endif]-->

</head>


<body>
<h1>Table with fixed header in IE6 - 8, Firefox 2.+, Safari 3 and Opera 9.5+</h1>
<p>Notes: The header is part of the same table and not a separate table on top. The width of the 

table cells or header cells is not defined and will match whatever content is in the cells. The 

table can be a fluid length and will resize within reasonable limits accordingly.</p>
<div class="wrap">
	<div class="inner">
		<table id="data" cellspacing="0" cellpadding="0">
			<thead>
				<tr>
					<th><p>Jan</p></th>
					<th><p>Feb</p></th>
					<th class="last"><p>Dec</p></th>
				</tr>
			</thead>
			<tfoot>
				<tr>
					<th><p>Jan</p></th>
					<th><p>Apr</p></th>					
					<th class="last"><p>Dec</p></th>
				</tr>
			</tfoot>
			<tbody>
				<tr>
					<td>1</td>
					<td>1</td>
					<td class="last">3</td>
				</tr>
				<tr>
					<td>1</td>
					<td>5</td>
					<td class="last">7</td>
				</tr>
				<tr>
					<td>2</td>
					<td>6</td>
					<td class="last">6</td>
				</tr>
				<tr>
					<td>1</td>
					<td>1</td>
					<td class="last">3</td>
				</tr>
				<tr>
					<td>1</td>
					<td>5</td>
					<td class="last">7</td>
				</tr>
				<tr>
					<td>2</td>
					<td>6</td>
					<td class="last">6</td>
				</tr>
				<tr>
					<td>1</td>
					<td>1</td>
					<td class="last">3</td>
				</tr>
				<tr>
					<td>1</td>
					<td>5</td>
					<td class="last">7</td>
				</tr>
				<tr>
					<td>2</td>
					<td>6</td>
					<td class="last">6</td>
				</tr>
				<tr>
					<td>1</td>
					<td>1</td>
					<td class="last">3</td>
				</tr>
				<tr>
					<td>1</td>
					<td>5</td>
					<td class="last">7</td>
				</tr>
				<tr>
					<td>2</td>
					<td>6</td>
					<td class="last">6</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>
</body>
</html>

Any questions on alignment or width or anything just ask

RyanReese · February 11, 2010, 9:58pm

I coudl whip up an example that works in FF/IE with a non scrollable footer but that’s part of the technique with the scrolling table content…I don’t think you can get the footer to not move

RyanReese · February 11, 2010, 10:01pm

Nevermind I got it working so the footer doesn’t scroll :). THis should make you happy

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
p {margin:0 0 1em}
table p {margin :0}
.wrap {
	margin:50px 0 0 2&#37;;
	width:95%;
	float:left;
	position:relative;
	height:200px;
	overflow:hidden;
	padding:25px 0;
	background:#fffccc;
	border:1px solid #000;
}
.inner {
	width:100%;
	height:200px;
	overflow:auto;
}
table {
	width:100%;
	margin:0 0 0 -1px;
	border-collapse:collapse;
}
td {
	padding:5px;
	border:1px solid #000;
	text-align:center;
	background:yellow;
}
tfoot th, thead th {
	font-weight:bold;
	text-align:left;
	border:1px solid #000;
	padding:0 3px 0 5px;
	background:#ffffcc;
}
thead th {border:none;}
thead tr p {
	position:absolute;
	top:0;
}
tfoot tr p{bottom:0;position:absolute;
.last {
	padding-right:15px!important;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
.inner {overflow-x:hidden}

</style>
<![endif]-->

</head>


<body>
<h1>Table with fixed header in IE6 - 8, Firefox 2.+, Safari 3 and Opera 9.5+</h1>
<p>Notes: The header is part of the same table and not a separate table on top. The width of the 

table cells or header cells is not defined and will match whatever content is in the cells. The 

table can be a fluid length and will resize within reasonable limits accordingly.</p>
<div class="wrap">
	<div class="inner">
		<table id="data" cellspacing="0" cellpadding="0">
			<thead>
				<tr>
					<th><p>Jan</p></th>
					<th><p>Feb</p></th>
					<th class="last"><p>Dec</p></th>
				</tr>
			</thead>
			<tfoot>
				<tr>
					<th><p>Jan</p></th>
					<th><p>Apr</p></th>					
					<th class="last"><p>Dec</p></th>
				</tr>
			</tfoot>
			<tbody>
				<tr>
					<td>1</td>
					<td>1</td>
					<td class="last">3</td>
				</tr>
				<tr>
					<td>1</td>
					<td>5</td>
					<td class="last">7</td>
				</tr>
				<tr>
					<td>2</td>
					<td>6</td>
					<td class="last">6</td>
				</tr>
				<tr>
					<td>1</td>
					<td>1</td>
					<td class="last">3</td>
				</tr>
				<tr>
					<td>1</td>
					<td>5</td>
					<td class="last">7</td>
				</tr>
				<tr>
					<td>2</td>
					<td>6</td>
					<td class="last">6</td>
				</tr>
				<tr>
					<td>1</td>
					<td>1</td>
					<td class="last">3</td>
				</tr>
				<tr>
					<td>1</td>
					<td>5</td>
					<td class="last">7</td>
				</tr>
				<tr>
					<td>2</td>
					<td>6</td>
					<td class="last">6</td>
				</tr>
				<tr>
					<td>1</td>
					<td>1</td>
					<td class="last">3</td>
				</tr>
				<tr>
					<td>1</td>
					<td>5</td>
					<td class="last">7</td>
				</tr>
				<tr>
					<td>2</td>
					<td>6</td>
					<td class="last">6</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>
</body>
</html>

nofel · February 11, 2010, 10:39pm

what does the last class do? i m confused

RyanReese · February 11, 2010, 10:46pm

It allows room for the scrollbar We could do last-child pseudo class but IE doesn’t support it so a class is better.

Stomme_poes · February 12, 2010, 8:18am

iirc, IE7 was specifically the one who needed some space for the scrollbar… I remember trying without it and the other browsers seemed mostly ok, but IE7 would cut off the last column.

nofel · February 12, 2010, 9:51am

i found a solution. i modified what paul posted. here is my code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#wrapper{width:500px; height:200px; border:1px solid red; overflow:hidden; position:relative}
.inner{width:500px; height:200px; overflow:auto;}
th thead tfoot{position:fixed;}
</style>
</head>

<body>
<div id="wrapper">
<table border="1">
    <tr>
        <thead>
            <th width="200">Name</th>
            <th width="100">Address</th>
            <th class="last" width="200">Modify</th>
         </thead>
     </tr>
</table>
<div class="inner">
        <table>
             <tr>
                 <tbody>
                    <td class="last" width="200" valign="top"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultricies suscipit nisl nec tristique. Praesent enim lorem, vestibulum eleifend sollicitudin a, pulvinar eu sem. Etiam pharetra vulputate elit, et imperdiet tellus dapibus et. Vestibulum odio quam, ultrices a scelerisque quis, placerat nec arcu. Sed tempus nisl magna. Morbi mauris augue, lacinia a feugiat in, porta quis purus. Nullam ligula dui, ullamcorper vit</p></td>
                    <td class="last" width="100" valign="top"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultricies suscipit nisl nec tristique. Praesent enim lorem, vestibulum</p></td>
                    <td class="last" width="200" valign="top"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultricies suscipit nisl nec tristique. Praesent enim lorem, vestibulum eleifend sollicitudin a, pulvinar eu sem. Etiam pharetra vulputate elit, et imperdiet tellus dapibus et. Vestibulum odio quam, ultrices a scelerisque quis, placerat nec arcu. Sed tempus nisl magna. Morbi mauris augue, lacinia a feugiat in, porta quis purus. Nullam ligula dui, ullamcorper vit</p></td>
                 </tbody>
     </tr>
     </table>
</div>
</div>
        <table>
            <tfoot>
                <tr>
                <td width="200">Hello</td>
                <td width="100">World</td>
                <td width="200">Hello</td>
                </tr>
            </tfoot>
         </table>

</body>
</html>

PaulOB · February 12, 2010, 10:36am

You haven’t listened to a word we said have you

All you have done there is to create three tables and fixed the widths. There is no correlation between the header and footers and it will only work as long as the data is fixed to those specific widths.

The position:fixed you are using is having no effect as you can’t position part of a table.

However if that’s all you wanted then it will work.

There never was any problem in doing it in three tables but it makes nonsense of the semantics and doesn’t allow all the data to stretch accordingly.

Ryan gave you a 3 column version above with visible footer anyway.

nofel · February 12, 2010, 11:01am

i m sorry if i ignored what u said in posts. actually i m out of time as i have presntation tomorrow and so much to do but there is another problem now when i insert php tags which is calling dynamic data from database in td of tbody. each td get height of 200 which comes from inner class still problem

PaulOB · February 12, 2010, 11:11am

It’s ok we are used to it

actually i m out of time as i have presntation tomorrow and so much to do but there is another problem now when i insert php tags which is calling dynamic data from database in td of tbody. each td get height of 200 which comes from inner class still problem
Remove the height from the wrapper as its not needed and is cutting the table short.


#wrapper{width:500px; border:1px solid red; overflow:hidden; position:relative}

nofel · February 12, 2010, 11:15am

Paul_O_B:

It’s ok we are used to it

Remove the height from the wrapper as its not needed and is cutting the table short.
#wrapper{width:500px; border:1px solid red; overflow:hidden; position:relative}

did that nothing happened. the gap r still huge between td

PaulOB · February 12, 2010, 11:19am

Do you have a revised example that I can look at as I’m not quite sure what I’m looking for?

nofel · February 12, 2010, 11:24am

what i am looking for
1.headers to be fixed. that i did.
2. tbody to be scrollable (that also i did but it has huge gaps in b.w i think its taking it from inner class)
3.tfooter shld be fixed too as i m gonna show buttons. here is the example (bare with me the php)
having said that i tried same thing on with just dummy text and it worked fine but the programmer modified what i made before as in many pages its working fine but i can’t go and delete the php code in every page to make his html correct so i need made a new one. here is the updated code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript" src="../js/formValidations.js">
</script>
<script type="text/javascript" language="javascript">
function update(count){
    //alert(count);
    //var rstatus = document.getElementsByName('rstatus[]');
    //var check = rstatus[count].checked;
    //if(check == 1){
    //    check = 1;
    //}else{
    //    check = 0;
    //}
    document.getElementById('hcount').value = count;
    //document.getElementById('hidStatus').value=check;
    document.roleFrm.submit();
}
</script>
<style>
#wrapper{width:100%; border:1px solid red; overflow:hidden; position:relative}
.inner{width:500px; height:200px; overflow:auto;}
th thead tfoot{position:fixed;}
td tbody{margin:0px;}
</style>
</head>

<body onload="<?php if($error){?>return chkRole(1);<?php }?>">

<div class="popup" style="height:250px;  width:400px;">
<form name="roleFrm" method="post" action="pm_role.php" onsubmit="return chkRole(this);">
<input type="hidden" name="hcount" id="hcount">
<div id="wrapper">
<table border="1">
    <tr>
        <thead>
            <th width="200">Name</th>
            <th width="100">Status</th>
            <th class="last" width="200">Action</th>
         </thead>
     </tr>
</table>
<?php 
$query = "SELECT name,status,role_id FROM pm_roles ORDER BY name";
$stmt = doParse($conn, $query);
$result = doExecute($stmt);
$count = 0;
while(ocifetchinto($stmt, $values)){
?>
<div class="inner">
        <table>
             <tr>
                 <tbody>
                    <td  width="200" valign="top"><input type="text" name="role[]" size="30" value="<?php echo $values[0];?>" <?php if($edit && $rid==$values[2]){ }else{?> readonly="readonly"<?php }?>/></td>
                    <td  width="100" valign="top"><input type="checkbox" name="rstatus[]" <?php if($values[1]=='Active'){?> checked="checked" <?php } if($edit && $rid==$values[2]){ }else{?> disabled="disabled"<?php }?>/></td>
                 
                    <td width="200" valign="top"><?php if($edit && $rid==$values[2]){?><a href="#" onclick="update(<?php echo $count?>);">save</a><?php }else{?><a href="pm_role.php?rid=<?php echo $values[2];?>&edit=1">edit</a><?php }?></td>
                 </tbody>
     </tr>
     <?php 
$count++;
}
?>
     </table>
</div>
</div>
        <table>
            <tfoot>
                <tr>
                <td><input type="text" name="txtNewRole" id="txtNewRole" size="30" style="background:#FFFF99" /></td>
                <td width="200"><input class="buttons" type="submit" name="add" value="Add" style="width:75px;"></td>
                <td width="100"><input type="button" class="buttons" name="close" value="Close" onclick="javascript:window.close();"/></td>
                <td width="200">Hello</td>
                </tr>
            </tfoot>
         </table>

</body>
</html>

above the doctype is the php connection and includes file (which i excluded)

PaulOB · February 12, 2010, 11:38am

tbody to be scrollable (that also i did but it has huge gaps in b.w i think its taking it from inner class)

I’m not seeing any large heights on the td content. Is this only happening in a certain browser or is there some other code that we need?

We would prefer to see actual code from view source (without php) so we can test locally. You need ot create a workking eaxample for us exhibiting the problem as only then can we really address the issue.

I do notice that your table structure is all wrong and you have the tbody tags in the wrong place. They should be outside the tr not inside it.

nofel · February 12, 2010, 11:44am

could this be the issue. i posted all code. there r no gaps with the static text but with dynamic data the gap is huge. (in all browsers)
Edit:i did fixed the tr but still gaps r there, i used firebug to find whats wrong. i found that in while loop. the inner div is repeating thus giving every td height of 200. so i found the problem how do i fix it?

PaulOB · February 12, 2010, 12:07pm

If the .inner div is repeating then it sounds like your programmer has repeated the div and the table instead of repeating the tr elements only. That would be a programming fix not a css one.

As I said above if you posted the css from the browsers view source as requested we could have seen the extra tags and structure that was actually being output.

nofel · February 12, 2010, 12:27pm

it might be coz i m placing the while loop inside inner div? which is performing whole table thingy again.?

Stomme_poes · February 12, 2010, 12:33pm

You know, this might start getting into

(http://www.sitepoint.com/forums/forumdisplay.php?f=34), and it's possible that this thread might need to be referenced in a new thread over there?

This while loop must be in PHP right?  Since HTML and CSS can't do that.

nofel · February 12, 2010, 12:40pm

Ah! so a programmer mate fixed the issue. i was making a table after while loop which made it whole repeat and it gave problem coz whole table structure was epeated whereas the tr shld have been repeated. but thnx though all of u.
Cheers,

Stomme_poes · February 12, 2010, 12:42pm

Yay! Glad this got working for you! Your presentation is tomorrow? Good luck with it.