APD Toronto
asked on
Scrollable Table in HTML
HI Experts,
Does anyone have a good and easy example of a HTML table where I can lock the thead and first column of each row, then I can easily specify the height and width of the table that I want and it will lock what it needs. Where, if needed, the rest of the data will scroll vertically or horizontally.
Thank you
Does anyone have a good and easy example of a HTML table where I can lock the thead and first column of each row, then I can easily specify the height and width of the table that I want and it will lock what it needs. Where, if needed, the rest of the data will scroll vertically or horizontally.
Thank you
ASKER
I just want it to add a scroll.
This used to work a couple of years ago, but I cannot remember how to make the headings "stick"
HTML:
CSS:
This used to work a couple of years ago, but I cannot remember how to make the headings "stick"
HTML:
<a href="index.php?action=logout"> <input type="button" value="Logout" id="button"> </a>
<br>
<div id="tbl-container">
<table>
<thead>
<th class="locked">User</th>
</thead>
<tr>
<td class="alt1">Reservations</td>
</tr>
<tr>
<td class="alt-1">User 2</td>
</tr>
<tr>
<td class="alt1">User 3</td>
</tr>
<tr>
<td class="alt-1">User 4</td>
</tr>
<tr>
<td class="alt1">User 5</td>
</tr>
<tr>
<td class="alt-1">User 6</td>
</tr>
<tr>
<td class="alt1">User 7</td>
</tr>
<tr>
<td class="alt-1">User 8</td>
</tr>
<tr>
<td class="alt1">User 9</td>
</tr>
<tr>
<td class="alt-1">User 10</td>
</tr>
</table>
</div>
CSS:
input, select{
font-size: 8pt;
}
div#tbl-container {
width: 200px;
height: 150px;
overflow: auto;
scrollbar-base-color:#ffeaff;
margin: 10px auto;
}
thead th, thead th.locked {
font-size: 14px;
font-weight: bold;
text-align: center;
background-color: #FFFF66;
border-right: 1px solid silver;
position:relative;
cursor: default;
}
thead th {
top: expression(document.getElementById("tbl-container").scrollTop-2); /* IE5+ only */
z-index: 20;
}
thead th.locked {z-index: 30;}
td.locked, th.locked {
font-size: 12px;
font-weight: bold;
border-right: 1px solid silver;
left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft); /* IE5+ only */
position: relative;
z-index: 10;
}
.alt1 {
background-color: white;
}
.alt-1 {
background-color: #ccffff;
}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Here http://www.imaputz.com/cssStuff/bigFourVersion.html is one that works in Firefox, Chrome, Safari, and Opera. It doesn't work in IE8 on this machine. It lists a bunch of old browsers that don't support it.
ASKER
That example actually serves my purpose.
Can you show me how to implement?
Thank you
Can you show me how to implement?
Thank you
You need to save a copy of the source code for that page and strip out all the parts that you don't need. I don't see any other way to do it.
http://www.datatables.net/