|
|||||||||
|
|||||||||
|
|||||||||
| |
|||
 |
|
|
|
|
|||||||||
|
|||||||||
|
|||||||||
| |
|||
|
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Display Modes |
Dev Articles Community Forums Sponsor:
|
|
|
|
#1
May 6th, 2005, 07:46 AM
|
|||
|
|||
|
Scrollbars
I need to know if one can add scrollbars to tables.
If so, can you give an example code for how to do that... If not, can you supply a good learning frames tutorial? Thanks.
|
|
#2
May 6th, 2005, 08:54 AM
|
||||
|
||||
|
The following doesn't seem to work in IE...
But try it in Firefox... Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Table Test</title>
<style type="text/css">
body {
font-family: sans-serif;
}
table {
border-color: #000000;
border-spacing: 0px;
border-style: solid;
border-width: 2px;
cell-spacing: 0px;
margin-left: auto;
margin-right: auto;
}
tbody.scrolling {
overflow: auto;
}
td, th {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
padding: 2px;
padding-left: 6px;
padding-right: 6px;
}
td.numeric {
text-align: right;
}
th.numeric {
text-align: right;
}
tr.alt {
background-color: #c0f0c0;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0">
<thead>
<tr style="background-color:#008000;color:#ffffff;">
<th>Number</th>
<th>Date</th>
<th>Description</th>
<th>Amount</th>
<th>Tax</th>
<th>Balance</th>
</tr>
<tr style="background-color:#90c090;color:#000000;">
<th colspan=5 style="text-align:right;">Starting Balance</th>
<th class="numeric">$5153.89 </th>
</tr>
</thead>
<tfoot>
<tr style="background-color:#90c090;color:#000000;">
<th colspan=5 style="text-align:right;">Ending Balance</th>
<th class="numeric">$5881.95 </th>
</tr>
</tfoot>
<tbody class="scrolling" style="max-height:14ex;">
<tr>
<td class="numeric">C1487</td>
<td class="numeric">04/05/00</td>
<td>Benton Bakery</td>
<td class="numeric">-$32.14</td>
<td> </td>
<td class="numeric">$5121.75 </td>
</tr>
<tr class="alt">
<td class="numeric">C1488</td>
<td class="numeric">04/05/00</td>
<td>Dave's Dry Cleaning</td>
<td class="numeric">-$14.21</td>
<td> </td>
<td class="numeric">$5107.54 </td>
</tr>
<tr>
<td class="numeric"> </td>
<td class="numeric">04/07/00</td>
<td>Deposit</td>
<td class="numeric">$1231.57</td>
<td> </td>
<td class="numeric">$6339.11 </td>
</tr>
<tr class="alt">
<td class="numeric">DC102341</td>
<td class="numeric">04/07/00</td>
<td>Murray's</td>
<td class="numeric">-$54.31</td>
<td>Y</td>
<td class="numeric">$6284.80 </td>
</tr>
<tr>
<td class="numeric">C1488</td>
<td class="numeric">04/08/00</td>
<td>Greatland Auto Insurance</td>
<td class="numeric">-$119.52</td>
<td> </td>
<td class="numeric">$6165.28 </td>
</tr>
<tr class="alt">
<td class="numeric">C1489</td>
<td class="numeric">04/08/00</td>
<td>Northeast Energy</td>
<td class="numeric">-$68.21</td>
<td> </td>
<td class="numeric">$6097.07 </td>
</tr>
<tr>
<td class="numeric">DC115982</td>
<td class="numeric">04/10/00</td>
<td>Mobile</td>
<td class="numeric">-$22.19</td>
<td>Y</td>
<td class="numeric">$6074.88 </td>
</tr>
<tr class="alt">
<td class="numeric">C1490</td>
<td class="numeric">04/11/00</td>
<td>Consolidated Communications</td>
<td class="numeric">-$32.81</td>
<td> </td>
<td class="numeric">$6042.07 </td>
</tr>
<tr>
<td class="numeric">C1490</td>
<td class="numeric">04/12/00</td>
<td>Star Cable</td>
<td class="numeric">-$57.51</td>
<td> </td>
<td class="numeric">$5984.56 </td>
</tr>
<tr class="alt">
<td class="numeric">DC145998</td>
<td class="numeric">04/14/00</td>
<td>MegaBuy Office Supply</td>
<td class="numeric">-$102.61</td>
<td>Y</td>
<td class="numeric">$5881.95 </td>
</tr>
</tbody>
</table>
</body>
</html>
There are similar solutions for IE The trick is the css line overflow: auto;
|
|
#3
May 6th, 2005, 08:58 AM
|
||||
|
||||
|
Here's a solution that's IE compatible...
If I remember correctly, it's a little bit random. Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Table Test</title>
</head>
<body>
<table style="width: 300px" cellpadding="0" cellspacing="0">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
<div style="overflow: auto;height: 100px; width: 320px;">
<table style="width: 300px;" cellpadding="0" cellspacing="0">
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
</table>
</div>
</body>
</html>
For the record, this example was extracted here
|
|
#5
May 6th, 2005, 04:10 PM
|
||||
|
||||
|
You should notice, in the CSS for both examples is overflow: auto;.
This is the trick. Incombination with the height property, this tells the browser to keep the height, and if you need more space make them scroll. What I like about the first example is that it is all kept within the same table. It makes use of <thead> and <tbody>... It's a shame IE doesn't support that, because it really makes the most sense. The second example is a little harder to play with. It actually uses two tables, the second one wrapped inside a DIV. The DIV has the height and overflow set, giving it scrollbars. Sometimes the tables don't match up with the header rows though. The best is to simply test the examples yourself. Otherwise, you might want to use an IFRAME... but i don't encourage iframe use.
|
|
#6
May 7th, 2005, 09:29 PM
|
|||
|
|||
|
|
| Viewing: Dev Articles Community Forums > Web Design > Advanced Web Development > Scrollbars |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
|
 |
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
