SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 41
  1. #1
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    scrollable table

    hey all i m making a table scroll but its not happening here is the code
    Code HTML4Strict:
                        <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-->
    All those who wander aren't lost.

  2. #2
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    8,904
    Mentioned
    139 Post(s)
    Tagged
    2 Thread(s)
    What do you mean, you are making a table "scroll" ??
    Rémon - Hosting Advisor

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  3. #3
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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?
    All those who wander aren't lost.

  4. #4
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    There are various way to achieve a scrollable table I assume you mean scrollable "table body".

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

    Code:
        <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.

  5. #5
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    can u fix my above example. pls? why isn't my table scrolling?
    All those who wander aren't lost.

  6. #6
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code:
    <?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.

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Base your c ode off of this
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  8. #8
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    @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.
    All those who wander aren't lost.

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  10. #10
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    lol. i did so far :P 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.
    Code HTML4Strict:
    <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>
    All those who wander aren't lost.

  11. #11
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Just copy Pauls code
    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
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  12. #12
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    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.

  13. #13
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You don't need to have the footer on there Stomme..I don't think removing it does anything ill
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  14. #14
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    Off Topic:

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

  15. #15
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    [ot]I remember in my version it was easy to remove..PS-Tried display:none;?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  16. #16
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    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)

  17. #17
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    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)
    [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
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    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.

  19. #19
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    (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.)
    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.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  20. #20
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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?
    All those who wander aren't lost.

  21. #21
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Edit:

    Footer scollring. One second
    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 class="last"><p>Dec</p></th>
    				</tr>
    			</thead>
    			<tfoot>
    				<tr>
    					<th><p>Jan</p></th>
    					<th><p>Apr</p></th>					
    					<th class="last"><p>Dec</p></th>
    				</tr>
    			</tfoot>
    			<tbody>
    				<tr>
    					<td>1</td>
    					<td>1</td>
    					<td class="last">3</td>
    				</tr>
    				<tr>
    					<td>1</td>
    					<td>5</td>
    					<td class="last">7</td>
    				</tr>
    				<tr>
    					<td>2</td>
    					<td>6</td>
    					<td class="last">6</td>
    				</tr>
    				<tr>
    					<td>1</td>
    					<td>1</td>
    					<td class="last">3</td>
    				</tr>
    				<tr>
    					<td>1</td>
    					<td>5</td>
    					<td class="last">7</td>
    				</tr>
    				<tr>
    					<td>2</td>
    					<td>6</td>
    					<td class="last">6</td>
    				</tr>
    				<tr>
    					<td>1</td>
    					<td>1</td>
    					<td class="last">3</td>
    				</tr>
    				<tr>
    					<td>1</td>
    					<td>5</td>
    					<td class="last">7</td>
    				</tr>
    				<tr>
    					<td>2</td>
    					<td>6</td>
    					<td class="last">6</td>
    				</tr>
    				<tr>
    					<td>1</td>
    					<td>1</td>
    					<td class="last">3</td>
    				</tr>
    				<tr>
    					<td>1</td>
    					<td>5</td>
    					<td class="last">7</td>
    				</tr>
    				<tr>
    					<td>2</td>
    					<td>6</td>
    					<td class="last">6</td>
    				</tr>
    			</tbody>
    		</table>
    	</div>
    </div>
    </body>
    </html>
    Any questions on alignment or width or anything just ask
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  22. #22
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I coudl whip up an example that works in FF/IE with a non scrollable footer but that's part of the technique with the scrolling table content..I don't think you can get the footer to not move
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  23. #23
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Nevermind I got it working so the footer doesn't scroll . THis should make you happy
    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;
    	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;
    }
    tfoot tr p{bottom:0;position:absolute;
    .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 class="last"><p>Dec</p></th>
    				</tr>
    			</thead>
    			<tfoot>
    				<tr>
    					<th><p>Jan</p></th>
    					<th><p>Apr</p></th>					
    					<th class="last"><p>Dec</p></th>
    				</tr>
    			</tfoot>
    			<tbody>
    				<tr>
    					<td>1</td>
    					<td>1</td>
    					<td class="last">3</td>
    				</tr>
    				<tr>
    					<td>1</td>
    					<td>5</td>
    					<td class="last">7</td>
    				</tr>
    				<tr>
    					<td>2</td>
    					<td>6</td>
    					<td class="last">6</td>
    				</tr>
    				<tr>
    					<td>1</td>
    					<td>1</td>
    					<td class="last">3</td>
    				</tr>
    				<tr>
    					<td>1</td>
    					<td>5</td>
    					<td class="last">7</td>
    				</tr>
    				<tr>
    					<td>2</td>
    					<td>6</td>
    					<td class="last">6</td>
    				</tr>
    				<tr>
    					<td>1</td>
    					<td>1</td>
    					<td class="last">3</td>
    				</tr>
    				<tr>
    					<td>1</td>
    					<td>5</td>
    					<td class="last">7</td>
    				</tr>
    				<tr>
    					<td>2</td>
    					<td>6</td>
    					<td class="last">6</td>
    				</tr>
    				<tr>
    					<td>1</td>
    					<td>1</td>
    					<td class="last">3</td>
    				</tr>
    				<tr>
    					<td>1</td>
    					<td>5</td>
    					<td class="last">7</td>
    				</tr>
    				<tr>
    					<td>2</td>
    					<td>6</td>
    					<td class="last">6</td>
    				</tr>
    			</tbody>
    		</table>
    	</div>
    </div>
    </body>
    </html>
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  24. #24
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    what does the last class do? i m confused
    All those who wander aren't lost.

  25. #25
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    It allows room for the scrollbar We could do last-child pseudo class but IE doesn't support it so a class is better.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •