Scrollable table

nofel · February 11, 2010, 1:31pm

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

rpkamp · February 11, 2010, 1:37pm

What do you mean, you are making a table “scroll” ??

nofel · February 11, 2010, 1:45pm

yes there is tabular data. which has a fixed height i want to scroll it (if data comes more from database). am i doing it wrong it above code?

xhtmlcoder · February 11, 2010, 1:59pm

There are various way to achieve a scrollable table I assume you mean scrollable “table body”.

CSS: tbody { overflow: auto; height: 50px; }


    <table border="1">
      <tbody>
        <tr>
          <td>
            Potatoes
          </td>
        </tr>
      </tbody>
      <tbody>
        <tr>
          <td>
            1
          </td>
        </tr>
        <tr>
          <td>
            2
          </td>
        </tr>
        <tr>
          <td>
            3
          </td>
        </tr>
        <tr>
          <td>
            4
          </td>
        </tr>
      </tbody>
    </table>

Although not all browser support it correctly.

nofel · February 11, 2010, 2:03pm

can u fix my above example. pls? why isn’t my table scrolling?

xhtmlcoder · February 11, 2010, 3:04pm

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:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Scrollable tbody</title>
<style type="text/css">
/*<![CDATA[*/
<!-- 
tbody { overflow: auto; height: 50px; }
-->
/*]]>*/
</style>
  </head>
  <body>
    <table border="1">
      <tbody>
        <tr>
          <td>
            Potatoes
          </td>
        </tr>
      </tbody>
      <tbody>
        <tr>
          <td>
            1
          </td>
        </tr>
        <tr>
          <td>
            2
          </td>
        </tr>
        <tr>
          <td>
            3
          </td>
        </tr>
        <tr>
          <td>
            4
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

This is exactly the same as before just in full; so if it doesn’t scroll that will be down to your browser and bugs.

RyanReese · February 11, 2010, 3:13pm

Base your c ode off of this

nofel · February 11, 2010, 3:59pm

@Ryan… i didn’t get what paul said. i m in hurry so i need to know whts going on. why isn’t my table being scroll.

RyanReese · February 11, 2010, 4:39pm

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

nofel · February 11, 2010, 4:45pm

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>

RyanReese · February 11, 2010, 4:53pm

Just copy Pauls code

<!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><p>Mar</p></th>
					<th><p>Apr</p></th>
					<th><p>May</p></th>
					<th><p>Jun</p></th>
					<th><p>Jul</p></th>
					<th><p>Aug</p></th>
					<th><p>September</p></th>
					<th><p>Oct</p></th>
					<th><p>Nov</p></th>
					<th class="last"><p>Dec</p></th>
				</tr>
			</thead>
			<tfoot>
				<tr>
					<th><p>Jan</p></th>
					<th><p>Feb</p></th>
					<th><p>Mar</p></th>
					<th><p>Apr</p></th>
					<th><p>May</p></th>
					<th><p>Jun</p></th>
					<th><p>Jul</p></th>
					<th><p>Aug</p></th>
					<th><p>September</p></th>
					<th><p>Oct</p></th>
					<th><p>Nov</p></th>
					<th class="last"><p>Dec</p></th>
				</tr>
			</tfoot>
			<tbody>
				<tr>
					<td>1</td>
					<td>3</td>
					<td>5</td>
					<td>1</td>
					<td>1</td>
					<td>3</td>
					<td>1</td>
					<td>5</td>
					<td>7</td>
					<td>1</td>
					<td>1</td>
					<td class="last">3</td>
				</tr>
				<tr>
					<td>1</td>
					<td>3</td>
					<td>5</td>
					<td>1</td>
					<td>1</td>
					<td>3</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>3 more data</td>
					<td>5</td>
					<td class="last">7</td>
				</tr>
				<tr>
					<td>2</td>
					<td>4</td>
					<td>6</td>
					<td>1</td>
					<td>1</td>
					<td>3</td>
					<td>1</td>
					<td>23</td>
					<td>4</td>
					<td>1</td>
					<td>6</td>
					<td class="last">6</td>
				</tr>
				<tr>
					<td>1</td>
					<td>1</td>
					<td>6</td>
					<td>1</td>
					<td>4</td>
					<td>7</td>
					<td>1</td>
					<td>7</td>
					<td>1</td>
					<td>1</td>
					<td>3</td>
					<td class="last">6</td>
				</tr>
				<tr>
					<td>2</td>
					<td>3 with more data</td>
					<td>2</td>
					<td>3</td>
					<td>3</td>
					<td>3</td>
					<td>8</td>
					<td>1</td>
					<td>1</td>
					<td>2</td>
					<td>8</td>
					<td class="last">6</td>
				</tr>
				<tr>
					<td>6</td>
					<td>4</td>
					<td>4</td>
					<td>4</td>
					<td>2</td>
					<td>9</td>
					<td>4</td>
					<td>4</td>
					<td>6</td>
					<td>1</td>
					<td>1</td>
					<td class="last">3</td>
				</tr>
				<tr>
					<td>1</td>
					<td>1</td>
					<td>3</td>
					<td>7</td>
					<td>4</td>
					<td>5</td>
					<td>5</td>
					<td>2</td>
					<td>0</td>
					<td>3</td>
					<td>23</td>
					<td class="last">6</td>
				</tr>
				<tr>
					<td>7</td>
					<td>4</td>
					<td>2</td>
					<td>67</td>
					<td>2</td>
					<td>1</td>
					<td>1</td>
					<td>3</td>
					<td>1</td>
					<td>4</td>
					<td>4</td>
					<td class="last">4</td>
				</tr>
				<tr>
					<td>2</td>
					<td>4</td>
					<td>3</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>3</td>
					<td>2</td>
					<td>2</td>
					<td>5</td>
					<td>65</td>
					<td class="last">4</td>
				</tr>
				<tr>
					<td>2</td>
					<td>4</td>
					<td>4</td>
					<td>1</td>
					<td>2</td>
					<td>13</td>
					<td>6</td>
					<td>1</td>
					<td>1</td>
					<td>3</td>
					<td>7</td>
					<td class="last">4</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>
</body>
</html>

Change the actual content of the table to waht you have…and then style it aesthetically to whatever you want

Stomme_poes · February 11, 2010, 8:38pm

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.

RyanReese · February 11, 2010, 8:40pm

You don’t need to have the footer on there Stomme…I don’t think removing it does anything ill

Stomme_poes · February 11, 2010, 8:52pm

Off Topic:

I tried very hard to remove it. : ( I ended up having it set to visibility: hidden which still left a blank spot.

RyanReese · February 11, 2010, 9:02pm

[ot]I remember in my version it was easy to remove…PS-Tried display:none;?

Stomme_poes · February 11, 2010, 9:07pm

Off Topic:

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)

RyanReese · February 11, 2010, 9:12pm

[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

PaulOB · February 11, 2010, 9:36pm

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.

RyanReese · February 11, 2010, 9:40pm

Every browser does as far as I know. It’s just the way they are. There was a thread today on that in which I answered it.

nofel · February 11, 2010, 9:45pm

Can i get a demo example of a 3 col table with 3heads(non scroll) and 3tbody(scrollable) and footer also fixed(non scroll) pls?