177 users online (0 members and 177 guests)  

> > > > Scrollbar on table

  Results 1 to 7 of 7

Related

  1. Scrollbar in a cell in a table?    Forum: HTML Forum
    Replies: 6
  2. Vertical Scrollbar within a cell of a table?    Forum: HTML Forum
    Replies: 4
  3. Scrollbar, in or outside table    Forum: Website Scripts Forum
    Replies: 0
  4. Hiding x-scrollbar (in table) with Netscape    Forum: CSS Forum
    Replies: 9
  1. 07-04-2008, 01:12 AM #1
    agabhil
    agabhil is offline
    agabhil's Avatar
    New User
    Status
    Offline
    Join Date
    Jul 2008
    Posts
    3

    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
    Reply With Quote Reply With Quote
  2. 07-04-2008, 03:16 AM #2
    rangana
    rangana is offline
    rangana's Avatar
    Moderator/Allstar
    Status
    Offline
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    317

    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;">
    Hope makes sense.
    Checkout my porfolio.
    Please click the button when a member helped you.
    Take time to use Forum's Search function.
    Reply With Quote Reply With Quote
  3. 07-04-2008, 04:12 AM #3
    agabhil
    agabhil is offline
    agabhil's Avatar
    New User
    Status
    Offline
    Join Date
    Jul 2008
    Posts
    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
    Reply With Quote Reply With Quote
  4. 07-04-2008, 07:34 AM #4
    rangana
    rangana is offline
    rangana's Avatar
    Moderator/Allstar
    Status
    Offline
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    317

    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 the button when a member helped you.
    Take time to use Forum's Search function.
    Reply With Quote Reply With Quote
  5. 07-04-2008, 12:21 PM #5
    coothead
    coothead is offline
    coothead's Avatar
    bald 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.
    Reply With Quote Reply With Quote
  6. 07-05-2008, 12:45 AM #6
    agabhil
    agabhil is offline
    agabhil's Avatar
    New User
    Status
    Offline
    Join Date
    Jul 2008
    Posts
    3

    Re: Scrollbar on table

    But we can implement overflow property to tbody.This is working in Firefox, but not in IE
    Reply With Quote Reply With Quote
  7. 07-06-2008, 08:49 AM #7
    coothead
    coothead is offline
    coothead's Avatar
    bald 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
    That is true for Firefox only and in a rather unsatisfactory manner. It produces an unwanted horizontal scrollbar also.
    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>


    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Tags for this Thread