hey all i m making a table scroll but its not happening here is the code
<table width="100%" border="1"><!--scrollable table-->
<tr>
<td valign="top" width="200">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae tristique enim. Nam suscipit tellus a erat accumsan placerat. Etiam ac sapien non orci lacinia faucibus. Fusce vel felis convallis nunc malesuada commodo. Ut eget arcu ante. Suspendisse sit amet diam ligula, eu placerat mi. Proin ligula diam, vulputate id viverra ac, elementum ut neque. Mauris faucibus posuere metus, vitae bibendum dolor pulvinar et. Praesent congue gravida enim, sed varius sapien aliquam non. Vivamus eros nulla, sagittis sed dapibus pretium, pretium quis erat. Nullam quis justo nisl, consequat vestibulum massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur at lectus orci</td>
<td valign="top" width="100">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae tristique enim. Nam suscipit tellus a erat accumsan placerat. Etiam ac sapien non orci lacinia faucibus. Fusce vel felis convallis nunc malesuada commodo. Ut eget arcu ante. Suspendisse sit amet diam ligula, eu placerat mi. Proin ligula diam, vulputate id viverra ac, elementum ut neque. Mauris faucibus posuere metus, vitae bibendum dolor pulvinar et. Praesent congue gravida enim, sed varius sapien aliquam non. Vivamus eros nulla, sagittis sed dapibus pretium, pretium quis erat. Nullam quis justo nisl, consequat vestibulum massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur at lectus orci</td>
<td valign="top" width="200">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae tristique enim. Nam suscipit tellus a erat accumsan placerat. Etiam ac sapien non orci lacinia faucibus. Fusce vel felis convallis nunc malesuada commodo. Ut eget arcu ante. Suspendisse sit amet diam ligula, eu placerat mi. Proin ligula diam, vulputate id viverra ac, elementum ut neque. Mauris faucibus posuere metus, vitae bibendum dolor pulvinar et. Praesent congue gravida enim, sed varius sapien aliquam non. Vivamus eros nulla, sagittis sed dapibus pretium, pretium quis erat. Nullam quis justo nisl, consequat vestibulum massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur at lectus orci</td>
</tr>
</table><!--scrollable table ends-->
I don’t know why yours isn’t scrolling? Like I said it was a crude example and will only work in good browsers like Firefox. Anyway, I’ll reiterate what I posted before:
Because merely setting overflow:auto on the table won’t work for many browsers…heck hardly at all! Only firefox will give you a scrolalble table.
You can fix this by makig a wrapper div have the overflow…Paul explains it very well in the post. If you don’t understand him I doubt you will understand me
lol. i did so far but he is explaining something in detail with lots of tables data. i did follow him in making something like that but my tr becomes static but they loose there structure.
<html>
<head>
<title>Scrollable</title>
<style>
.wrapper{
width:500px;
height:100px;
overflow:auto;
}
.head{
position:fixed;
}
</style>
</head>
<body>
<div class="wrapper">
<table width="500">
<tr class="head">
<th>Name</th>
<th>Status</th>
<th>Modify</th>
</tr>
<tr>
<tbody>
<td width="200">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elementum, est et semper sagittis, tortor urna tincidunt sem, quis euismod mauris tortor a turpis. Mauris varius cursus suscipit. Duis rhoncus accumsan mollis. Proin dui lacus, bibendum sit amet ornare eget, scelerisque non eros. </td>
<td width="100">This is table</table>
<td width="200"> sortable</td>
</tbody>
</tr>
</table>
</div>
</body>
</html>
ammark: I used something very similar to Paul’s code for a scrolling table for a web app. The table footer was crucial to have and that kinda sucked, because semantically my table didn’t need a footer. I forget now what exactly it did… it kept some other part of the table from collapsing.
Nope, display:none stopped it from taking up space… what it needed to to was hold something open… either the width of stuff in the thead or the width of the columns or something… since it’s code I actually need to revisit, I can look at it again maybe this weekend (since i never finished it and I need to). I could send you the table part and you could see what it did… was something that actually was only supposed to work in chrome but I was going for cross-browser - IE6)
[ot]You can send the code if you wish and I’ll try and se what I can do in terms of getting the footer out of there. Tables and styling have been a weak point of mine though
For the scrolling table the table footer needs to stay in place or else the columns won’t match the header data (that was part of the trick in the quiz) . If you are using table headers then a table footer should be no problem to organise as it is exactly the same data repeated. (As an aside browsers are supposed to print headers and footers on each page when printed but I can’t remember how many actually do.)
Scrolling a table properly is very awkward which is why I set it for the quiz :). If only browsers had implemented the tbody scroll as shown in xhtmlcoder’s example then it would be simplicity itself.