scrollable table

**Stomme poes** · Feb 12, 2010 02:18

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** · Feb 12, 2010 03:51

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

Code HTML4Strict:

<!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>

**Paul O'B** · Feb 12, 2010 04:36

Originally Posted by ammark

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

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** · Feb 12, 2010 05:01

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

**Paul O'B** · Feb 12, 2010 05:11

Originally Posted by ammark

i m sorry if i ignored what u said in posts.

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.

Code:

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

**nofel** · Feb 12, 2010 05:15

Originally Posted by 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.

Code:

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

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

**Paul O'B** · Feb 12, 2010 05:19

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

**nofel** · Feb 12, 2010 05:24

Originally Posted by Paul O'B

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

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

Code HTML4Strict:

<!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)

**Paul O'B** · Feb 12, 2010 05:38

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** · Feb 12, 2010 05:44

Originally Posted by Paul O'B

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.

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?

**Paul O'B** · Feb 12, 2010 06:07

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** · Feb 12, 2010 06:27

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

**Stomme poes** · Feb 12, 2010 06:33

You know, this might start getting into PHP, 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** · Feb 12, 2010 06:40

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** · Feb 12, 2010 06:42

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

**nofel** · Feb 12, 2010 06:45

thnx stomme. yea its a international presentation. so i will bothering u guys more if i run into any more problems. hehehe :P

User Tag List

Thread: scrollable table

Thread Tools

Display

Bookmarks

Bookmarks

Posting Permissions