Thread: Scrollbar on table
Results 1 to 7 of 7
Related
-
Scrollbar in a cell in a table? Forum: HTML Forum
Replies: 6 -
Vertical Scrollbar within a cell of a table? Forum: HTML Forum
Replies: 4 -
Scrollbar, in or outside table Forum: Website Scripts Forum
Replies: 0 -
Hiding x-scrollbar (in table) with Netscape Forum: CSS Forum
Replies: 9
-
07-04-2008, 01:12 AM #1
Scrollbar on table
Hi friends,
I want to know whether we can add a scrollbar for a table without using div.I want to implemement this as a css so that I had used several tables inside my site with a particular class name and i want to implement scrollbars for all of them by just modifying the classname of those tables in the css file.
Pls help me on this
-
07-04-2008, 03:16 AM #2
Re: Scrollbar on table
Hi agabhil,
First of all, Welcome to the forums
Yes you can. Give the containing element of the tables an overflow property of auto and a fixed height.
For instance, if the tables are inside a <td> element, then set the <td>:
Code:<td style="height:50px;overflow:auto;">
Checkout my porfolio.
Please click thebutton when a member helped you.
Take time to use Forum's Search function.
-
07-04-2008, 04:12 AM #3
Re: Scrollbar on table
I tried this..but doesn't worked....Can you give me a full example...
Also, my requirement is to design a class so that if this class is assigned to a table, the table will get scrollbars..
Thanks for your response
-
07-04-2008, 07:34 AM #4
Re: Scrollbar on table
Show us your code or better a link, so we could have something to play with.
Checkout my porfolio.
Please click thebutton when a member helped you.
Take time to use Forum's Search function.
-
07-04-2008, 12:21 PM #5bald headed old fart
Status- Offline
Join Date- Aug 2003
Location- chertsey, a small town 25 miles south west of london, england.
Posts- 739
Re: Scrollbar on table
Hi there agabhil,
the table element and the td element do not implement the CSS overflow property.
-
07-05-2008, 12:45 AM #6
Re: Scrollbar on table
But we can implement overflow property to tbody.This is working in Firefox, but not in IE
-
07-06-2008, 08:49 AM #7bald headed old fart
Status- Offline
Join Date- Aug 2003
Location- chertsey, a small town 25 miles south west of london, england.
Posts- 739
Re: Scrollbar on table
Hi there agabhil,
But we can implement overflow property to tbody.This is working in Firefox, but not in IE
Also note that Opera and Safari, like IE do not support the overflow attribute for the tbody.
Here is how I wouild approach the problem...
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>scrollable table</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> * { margin:0; padding:0; } body { margin:10px; } #container { width:654px; margin:auto; } #table1 { border-top:2px solid #999; border-right:2px solid #999; border-left:2px solid #999; margin-bottom:-2px; } #table1 tbody { display:none; } #table2 { border-right:2px solid #999; border-left:2px solid #999; } #table1 th { background-color:#eef; } #table1 th,#table2 td { width:150px; height:30px; border:1px solid #000; padding:2px; } #scroller { width:654px; height:98px; overflow:auto; border-bottom:2px solid #999; } </style> <!--[if IE]> <style type="text/css"> #table1 th,#table2 td { height:26px; } #scroller { height:104px; } </style> <![endif]--> </head> <body> <div id="container"> <table id="table1"> <thead><tr> <th>header</th><th>header</th><th>header</th><th>header</th> </tr></thead> <tbody><tr><td></td><td></td><td></td><td></td></tr></tbody> </table> <div id="scroller"> <table id="table2"> <tbody><tr> <td>cell 1</td><td>cell 2</td><td>cell 3</td><td>cell 4</td> </tr><tr> <td>cell 5</td><td>cell 6</td><td>cell 7</td><td>cell 8</td> </tr><tr> <td>cell 9</td><td>cell 10</td><td>cell 11</td><td>cell 12</td> </tr><tr> <td>cell 13</td><td>cell 14</td><td>cell 15</td><td>cell 16</td> </tr><tr> <td>cell 17</td><td>cell 18</td><td>cell 19</td><td>cell 20</td> </tr><tr> <td>cell 21</td><td>cell 22</td><td>cell 23</td><td>cell 24</td> </tr><tr> <td>cell 25</td><td>cell 26</td><td>cell 27</td><td>cell 28</td> </tr><tr> <td>cell 29</td><td>cell 30</td><td>cell 31</td><td>cell 32</td> </tr></tbody> </table> </div> </div> </body> </html>
Cloudjiffy- PaaS for Developers
10-05-2020, 12:30 AM in Web Hosting Forum