SitePoint Sponsor

User Tag List

Page 4 of 4 FirstFirst 1234
Results 76 to 99 of 99
  1. #76
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    check if this works any better

    Code CSS:
    <!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>YuriKolovsky - CSS Quiz 22 - Scrolling Tables</title>
    <style type="text/css">
    * {
    	padding:0;
    	margin:0;
    }
     
    h1 {margin:0.2em 0.2em 0;}
    p {margin:0.5em 0.5em 1em;}
    table p {margin :0}
    table {
        width:100&#37;;/*inconsistent across all browsers?*/
    	/*border-collapse:collapse;/*causes weird bugs*/
    }
    td {
        text-align:center;
        background:#FC6;
    }
    th {
        font-weight:bold;
    	text-align:left;
    }
     
     
     
    /*added stuff*/
    .container {
    	position:relative;
    	padding:1.3em 0 0 0;/*compensation for top bottom header footer*/
    	width:99%;/*this has to be the same as below*/
    	background:#ffffcc;
    	margin:0 auto;
    }
    .scroll {
    	overflow:auto;
    	overflow-x:hidden;
    	height:9.6em;
    }
     
    .container thead tr p {/*this keeps header at top*/
    	position:absolute;
    	top:0;
    }
     
    .container th, .container td {/*makes table aestetically pleasing*/
    	width:150em; /*this should hold em*/
    }
     
     
    td {
    	border-right:1px solid #000;
    	border-top:1px solid #000;
    }
    th {
    	border-right:1px solid #000;
    }
    .container thead th {
    	border:0;
    }
    .container thead th.last {
    	border-right:18px solid #ffffcc;
    }
    .container tfoot th {
    	border-top:1px solid #000;	
    }
    .container {
    	border:solid #000 1px;	
    }
     
    /*footer fixed, the code below keeps footer at bottom*/
     
    .container tfoot tr p {
        position:absolute;
        bottom:0;
    }
    .container {
    	padding-bottom:1.3em;	
    }
    </style>
    <!--[if lte IE 7]>
    <style type="text/css">
    .container {
    width:99%;/*this has to be the same as above*/
    }
    .container thead th.last {
    border-right:0;
    }
    table {
    width:auto;/*if this is 100% it causes scrollbar to dissapear in ie7*/
    }
    </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="container">
    <div class="scroll">
        <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>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>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>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>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>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>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>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>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>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>4</td>
            </tr>
        </tbody>
    </table>
    </div>
    </div>
    </body>
    </html>

    and here is a version with borders on the header and footer
    Code CSS:
    <!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>YuriKolovsky - CSS Quiz 22 - Scrolling Tables</title>
    <style type="text/css">
    * {
    	padding:0;
    	margin:0;
    }
     
    h1 {margin:0.2em 0.2em 0;}
    p {margin:0.5em 0.5em 1em;}
    table p {margin :0}
    table {
        width:100%;/*inconsistent across all browsers?*/
    	/*border-collapse:collapse;/*causes weird bugs*/
    }
    td {
        text-align:center;
        background:#FC6;
    }
    th {
        font-weight:bold;
    	text-align:left;
    }
     
     
     
    /*added stuff*/
    .container {
    	position:relative;
    	padding:1.3em 0 0 0;/*compensation for top bottom header footer*/
    	width:99%;/*this has to be the same as below*/
    	background:#ffffcc;
    	margin:0 auto;
    }
    .scroll {
    	overflow:auto;
    	overflow-x:hidden;
    	height:9.6em;
    }
     
     
    .container thead tr p {/*this keeps header at top*/
    	position:absolute;
    	top:0;
    	/*add this below to have border on the headpart*/
    	border-left:solid #000 1px;
    	margin-left:-1px;
    	padding-bottom:5px;/*this can be almost any length (but not too big)*/
    }
     
    .container th, .container td {/*makes table aestetically pleasing*/
    	width:150em; /*this should hold em*/
    }
     
     
    td {
    	border-right:1px solid #000;
    	border-top:1px solid #000;
    }
    th {
    	border-right:1px solid #000;
    }
    .container thead th {
    	border:0;
    }
    .container thead th.last {
    	border-right:18px solid #ffffcc;
    }
    .container tfoot th {
    	border-top:1px solid #000;	
    }
    .container {
    	border:solid #000 1px;	
    }
     
    /*footer fixed, the code below keeps footer at bottom*/
     
    .container tfoot tr p {
        position:absolute;
        bottom:0;
    	/*add this below to have border on the footpart*/
    	border-left:solid #000 1px;
    	margin-left:-1px;
    	padding-top:3em;/*this can be almost any length (but not too big)*/
    }
    .container {
    	padding-bottom:1.3em;	
    }
    </style>
    <!--[if lte IE 7]>
    <style type="text/css">
    .container {
    width:99%;/*this has to be the same as above*/
    }
    .container thead th.last {
    border-right:0;
    }
    table {
    width:auto;/*if this is 100% it causes scrollbar to dissapear in ie7*/
    }
    </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="container">
    <div class="scroll">
        <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>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>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>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>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>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>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>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>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>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>4</td>
            </tr>
        </tbody>
    </table>
    </div>
    </div>
    </body>
    </html>

    maybe the large border on bottom can cover up the space that appears in safari 3.0.3 to make it looks like its not a error, because i have no ability to test it, and figure out what the problem is.
    Last edited by YuriKolovsky; May 18, 2009 at 03:11.

  2. #77
    SitePoint Zealot ajaxdinesh's Avatar
    Join Date
    Apr 2009
    Location
    India
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Quote Originally Posted by YuriKolovsky View Post
    check if this works any better

    Code CSS:
    <!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>YuriKolovsky - CSS Quiz 22 - Scrolling Tables</title>
    <style type="text/css">
    * {
    	padding:0;
    	margin:0;
    }
     
    h1 {margin:0.2em 0.2em 0;}
    p {margin:0.5em 0.5em 1em;}
    table p {margin :0}
    table {
        width:100%;/*inconsistent across all browsers?*/
    	/*border-collapse:collapse;/*causes weird bugs*/
    }
    td {
        text-align:center;
        background:#FC6;
    }
    th {
        font-weight:bold;
    	text-align:left;
    }
     
     
     
    /*added stuff*/
    .container {
    	position:relative;
    	padding:1.3em 0 0 0;/*compensation for top bottom header footer*/
    	width:99%;/*this has to be the same as below*/
    	background:#ffffcc;
    	margin:0 auto;
    }
    .scroll {
    	overflow:auto;
    	overflow-x:hidden;
    	height:9.6em;
    }
     
    .container thead tr p {/*this keeps header at top*/
    	position:absolute;
    	top:0;
    }
     
    .container th, .container td {/*makes table aestetically pleasing*/
    	width:150em; /*this should hold em*/
    }
     
     
    td {
    	border-right:1px solid #000;
    	border-top:1px solid #000;
    }
    th {
    	border-right:1px solid #000;
    }
    .container thead th {
    	border:0;
    }
    .container thead th.last {
    	border-right:18px solid #ffffcc;
    }
    .container tfoot th {
    	border-top:1px solid #000;	
    }
    .container {
    	border:solid #000 1px;	
    }
     
    /*footer fixed, the code below keeps footer at bottom*/
     
    .container tfoot tr p {
        position:absolute;
        bottom:0;
    }
    .container {
    	padding-bottom:1.3em;	
    }
    </style>
    <!--[if lte IE 7]>
    <style type="text/css">
    .container {
    width:99%;/*this has to be the same as above*/
    }
    .container thead th.last {
    border-right:0;
    }
    table {
    width:auto;/*if this is 100% it causes scrollbar to dissapear in ie7*/
    }
    </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="container">
    <div class="scroll">
        <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>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>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>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>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>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>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>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>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>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>4</td>
            </tr>
        </tbody>
    </table>
    </div>
    </div>
    </body>
    </html>

    and here is a version with borders on the header and footer
    Code CSS:
    <!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>YuriKolovsky - CSS Quiz 22 - Scrolling Tables</title>
    <style type="text/css">
    * {
    	padding:0;
    	margin:0;
    }
     
    h1 {margin:0.2em 0.2em 0;}
    p {margin:0.5em 0.5em 1em;}
    table p {margin :0}
    table {
        width:100%;/*inconsistent across all browsers?*/
    	/*border-collapse:collapse;/*causes weird bugs*/
    }
    td {
        text-align:center;
        background:#FC6;
    }
    th {
        font-weight:bold;
    	text-align:left;
    }
     
     
     
    /*added stuff*/
    .container {
    	position:relative;
    	padding:1.3em 0 0 0;/*compensation for top bottom header footer*/
    	width:99%;/*this has to be the same as below*/
    	background:#ffffcc;
    	margin:0 auto;
    }
    .scroll {
    	overflow:auto;
    	overflow-x:hidden;
    	height:9.6em;
    }
     
     
    .container thead tr p {/*this keeps header at top*/
    	position:absolute;
    	top:0;
    	/*add this below to have border on the headpart*/
    	border-left:solid #000 1px;
    	margin-left:-1px;
    	padding-bottom:5px;/*this can be almost any length (but not too big)*/
    }
     
    .container th, .container td {/*makes table aestetically pleasing*/
    	width:150em; /*this should hold em*/
    }
     
     
    td {
    	border-right:1px solid #000;
    	border-top:1px solid #000;
    }
    th {
    	border-right:1px solid #000;
    }
    .container thead th {
    	border:0;
    }
    .container thead th.last {
    	border-right:18px solid #ffffcc;
    }
    .container tfoot th {
    	border-top:1px solid #000;	
    }
    .container {
    	border:solid #000 1px;	
    }
     
    /*footer fixed, the code below keeps footer at bottom*/
     
    .container tfoot tr p {
        position:absolute;
        bottom:0;
    	/*add this below to have border on the footpart*/
    	border-left:solid #000 1px;
    	margin-left:-1px;
    	padding-top:3em;/*this can be almost any length (but not too big)*/
    }
    .container {
    	padding-bottom:1.3em;	
    }
    </style>
    <!--[if lte IE 7]>
    <style type="text/css">
    .container {
    width:99%;/*this has to be the same as above*/
    }
    .container thead th.last {
    border-right:0;
    }
    table {
    width:auto;/*if this is 100% it causes scrollbar to dissapear in ie7*/
    }
    </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="container">
    <div class="scroll">
        <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>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>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>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>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>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>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>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>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>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>4</td>
            </tr>
        </tbody>
    </table>
    </div>
    </div>
    </body>
    </html>

    maybe the large border on bottom can cover up the space that appears in safari 3.0.3 to make it looks like its not a error, because i have no ability to test it, and figure out what the problem is.

    Now working fine in safari 3.0.3.
    Cheers,
    Dinesh

  3. #78
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    When is hte next quiz???
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  4. #79
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    When is hte next quiz???
    Quote Originally Posted by Paul O'B View Post
    <snip>
    That wraps the quiz up and hope you have enjoyed it and earned something along the way.

    Look out for the next quiz which I will post on Monday morning or later tonight.


    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  5. #80
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Sorry it's late but a new quiz HAS NOW BEEN POSTED.

  6. #81
    SitePoint Zealot ajaxdinesh's Avatar
    Join Date
    Apr 2009
    Location
    India
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    why we need '.inner' class name?
    Code CSS:
    .inner {
    	width:100%;
    	height:200px;
    	overflow:auto;
    }

    You may define the overflow:auto in .wrap class.

    pls explain me.
    Cheers,
    Dinesh

  7. #82
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    ajaxdinesh
    why we need '.inner' class name?
    CSS Code:

    .inner {
    width:100&#37;;
    height:200px;
    overflow:auto;
    }


    You may define the overflow:auto in .wrap class.

    pls explain me.
    because some browsers behave crazy without it!
    (or if you can make it work without inner class, in all mentioned browsers, then go ahead)

  8. #83
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ajaxdinesh View Post
    why we need '.inner' class name?
    Code CSS:
    .inner {
        width:100%;
        height:200px;
        overflow:auto;
    }

    You may define the overflow:auto in .wrap class.

    pls explain me.
    If you do that then the fixed header just scrolls away with the table.

    The header is being positioned outside of the scroll element and stays still while the table data scrolls. The outer parent has the stacking context defined (position:relative) and holds the header in check and allows the inner element to scroll.

    It can't be done on the same element because there would be no fixed effect.

  9. #84
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    You can do that quite easily for all browsers except IE6 like this.

    Code:
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    #outer {
        position:relative;
        width:800px;
        border:1px solid #000;
    }
    table {
        width:380px;
    }
    td, th {
        border:1px solid #000
    }
    .table2 {
        width:400px;
        position:absolute;
        right:0;
        top:0;
        bottom:0;
        overflow:auto;
    }
    </style>
    </head>
    <body>
    <h1>Table test</h1>
    <div id="outer">
        <table cellspacing="0" cellpadding="0">
            <tr>
                <th scope="col">Test1</th>
                <th scope="col">Test2</th>
                <th scope="col">Test3</th>
                <th scope="col">Test4</th>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td>data</td>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td>data</td>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td>data</td>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td>data</td>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td>data</td>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td>data</td>
            </tr>
        </table>
        <div class="table2">
            <table cellspacing="0" cellpadding="0">
                <tr>
                    <th scope="col">Test1</th>
                    <th scope="col">Test2</th>
                    <th scope="col">Test3</th>
                    <th scope="col">Test4</th>
                </tr>
                <tr>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                </tr>
                <tr>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                </tr>
                <tr>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                </tr>
                <tr>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                </tr>
                <tr>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                </tr>
                <tr>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                </tr>
                <tr>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                </tr>
                <tr>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                </tr>
                <tr>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                </tr>
                <tr>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                </tr>
                <tr>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                </tr>
                <tr>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                </tr>
            </table>
        </div>
    </div>
    </body>
    </html>
    You could (probably) even incorporate the fixed header from this quiz for the right table.
    Note I have had to edit the above code to remove links as the anti-spam didn't like it for new posters

    Hi, I am the person to which Stomme is referring. This is a real-world application - I have 2 sets of tabulated data, on being typically 15-20 rows, the other being 50-100. I need to display these so that they can be viewed together, and also display notes underneath - hence the need to have the second table scrolling, it's height being constrained to that of the 1st table (the data is chemical test results, and so tables are appropriate for displaying the data).
    I have looked at this and my only problem is that the widths are being specified. The widths of the table-data may vary somewhat, and the page may be viewed at a variety of resolutions, from netbook to widescreen laptop, so it would be ideal to let each table flow to it's natural width to avoid white-space (which may be quite excessive on a wide-screen laptop) - though each table may vary a bit, but it would be unlikely that it would exceed the browser width and the lower-res screens would typically have a smaller base-font to allow for that.

    Is there a way of doing this whilst still allowing the tables to float to the left and take their "natural" widths (in another application I may use this on the tables may be dynamically columned on the server side, so I may have no idea about the relative widths of either table)?

    Cheers

    MH

  10. #85
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Is there a way of doing this whilst still allowing the tables to float to the left and take their "natural" widths?
    this question came to me too, and the only way i managed to maintain natural widths is to (without specifying any widths for td, th at all) is to have some th inside the table header, then put a p inside (<th><p></p></th>) then have that p absolutely positioned above the table (pauls suggestion)
    this maintains the th and the td in their positions, the only side effect is that it removes the th text "mass" from the flow, making the rows move slightly, if you don't want this, i suggest you add some sort of copy of the header inside the table somewhere so that it keep the table at their natural widths

    (i hope i don't sound too confusing)

    example:
    Code:
    thead p {
      position:aboslute;
      top:0;
    }
    
    <div class="outer">
    <div class="inner">
    <table>
    <thead><tr><th><p>head</p></th></tr></thead>
    <tfoot><tr><th><p>head</p></th></tr></tfoot><!--<=== this here keeps the table intact-->
    <tbody><tr><td>data</td></tr></tbody>
    </table>
    </div>
    </div>
    if you need the header and footer to be fixed then maybe this could work?
    Code:
    thead p {
      position:aboslute;
      top:0;
    }
    tfoot p {
      position:aboslute;
      bottom:0;
    }
    
    <div class="outer">
    <div class="inner">
    <table>
    <thead><tr><th><p>head</p></th></tr></thead>
    <tfoot><tr><th><p>head</p></th></tr></tfoot>
    <tbody>
    <tr><td>data</td></tr>
    <tr><th><p>head</p></th></tr><!--<=== this here keeps the table intact-->
    </tbody>
    </table>
    </div>
    </div>
    would love to see a better (non duplicate content using) solution

  11. #86
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Solution Time

    Ok another so called "CSS can't do" bites the dust and it's time to reveal the solutions.

    Thanks to all those that took part (Tommy, Ryan, Ajaxdinesh, Yurikolovsky) and to all those that watched with interest.
    Just a point I would add to anyone reading and using this solution (I've found this looking at a different problem I am having) - there is a "feature" with IE using the overflow, in that it doesn't allow extra space for the scrollbars, whereas firefox and other browsers do - this means that if your table takes the full width of the overflow you may end up with some data being hidden by the scrollbar - this is what the
    .last {
    padding-right:15px!important;
    }
    (if I am correct?) overcomes - don't forget it....... (I know that for most people reading this, it will be teaching you to suck eggs, but as something I came across recently, I thought it might be worth mentioning to save some less-experienced CSSers from this IE bug.....err I mean "undocumented feature")

  12. #87
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by YuriKolovsky View Post
    this question came to me too, and the only way i managed to maintain natural widths is to (without specifying any widths for td, th at all) is to have some th inside the table header, then put a p inside (<th><p></p></th>) then have that p absolutely positioned above the table (pauls suggestion)
    this maintains the th and the td in their positions, the only side effect is that it removes the th text "mass" from the flow, making the rows move slightly, if you don't want this, i suggest you add some sort of copy of the header inside the table somewhere so that it keep the table at their natural widths

    (i hope i don't sound too confusing)
    Hmmm, I _am_ a little bit confused - is that example of natural flow referring to this quiz, or the side-line solution kindly listed in post 61 for the 2 tables side-by-side?

  13. #88
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    its all about natural width table headers (for me)

  14. #89
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Mad-Halfling View Post
    Note I have had to edit the above code to remove links as the anti-spam didn't like it for new posters

    Hi, I am the person to which Stomme is referring. This is a real-world application - I have 2 sets of tabulated data, on being typically 15-20 rows, the other being 50-100. I need to display these so that they can be viewed together, and also display notes underneath - hence the need to have the second table scrolling, it's height being constrained to that of the 1st table (the data is chemical test results, and so tables are appropriate for displaying the data).
    I have looked at this and my only problem is that the widths are being specified. The widths of the table-data may vary somewhat, and the page may be viewed at a variety of resolutions, from netbook to widescreen laptop, so it would be ideal to let each table flow to it's natural width to avoid white-space (which may be quite excessive on a wide-screen laptop) - though each table may vary a bit, but it would be unlikely that it would exceed the browser width and the lower-res screens would typically have a smaller base-font to allow for that.

    Is there a way of doing this whilst still allowing the tables to float to the left and take their "natural" widths (in another application I may use this on the tables may be dynamically columned on the server side, so I may have no idea about the relative widths of either table)?

    Cheers

    MH
    Hi,

    For your pair of tables where one scrolls to the height of the other then it's unlikely that you could find a solution without using widths. The reason is that only an absolute element will keep pace with a relative parent and that means the width of the absolute element must be taken into consideration or else elements will overlap because absolute elements are removed from the flow.

    I just had a thought though and enclosed the whole thing in another table with two cells and the closest I could get would be this solution that doesn't work in IE6 and 7 but works in ie8 and elsewhere and has fluid width tables.

    Code:
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    #outer {
        position:relative;
        min-height:0;
        overflow:hidden;
    }
    table1, .table2 {
        width:auto;
    }
    td {
        padding:0 10px;
    }
    td td, th {
        border:1px solid #000;
        padding:5px;
        vertical-align:top;
    }
    .table2 {
        position:absolute;
        left:auto;
        top:0;
        bottom:0;
        overflow:auto;
        padding:0 20px 0 0;
    }
    *+html .table2 {
        width:100&#37;
    }
    </style>
    </head>
    <body>
    <h1>Table test (doesn't work in ie6 or 7)</h1>
    <div id="outer">
        <table cellspacing="0" cellpadding="0">
            <tr>
                <td><table class="table1" cellspacing="0" cellpadding="0">
                        <tr>
                            <th scope="col">Test1</th>
                            <th scope="col">Test2</th>
                            <th scope="col">Test3</th>
                            <th scope="col">Test4</th>
                        </tr>
                        <tr>
                            <td>data dat dat data data data </td>
                            <td>data</td>
                            <td>data</td>
                            <td>data</td>
                        </tr>
                        <tr>
                            <td>data</td>
                            <td>data</td>
                            <td>data</td>
                            <td>data</td>
                        </tr>
                        <tr>
                            <td>data</td>
                            <td>data</td>
                            <td>data</td>
                            <td>data</td>
                        </tr>
                        <tr>
                            <td>data</td>
                            <td>data</td>
                            <td>data</td>
                            <td>data</td>
                        </tr>
                        <tr>
                            <td>data</td>
                            <td>data</td>
                            <td>data</td>
                            <td>data</td>
                        </tr>
                        <tr>
                            <td>data</td>
                            <td>data</td>
                            <td>data</td>
                            <td>data</td>
                        </tr>
                    </table></td>
                <td><div class="table2">
                        <table cellspacing="0" cellpadding="0">
                            <tr>
                                <th scope="col">Test1</th>
                                <th scope="col">Test2</th>
                                <th scope="col">Test3</th>
                                <th scope="col">Test4</th>
                            </tr>
                            <tr>
                                <td>data</td>
                                <td>data</td>
                                <td>data</td>
                                <td>data</td>
                            </tr>
                            <tr>
                                <td>data</td>
                                <td>data</td>
                                <td>data</td>
                                <td>data</td>
                            </tr>
                            <tr>
                                <td>data</td>
                                <td>data</td>
                                <td>data</td>
                                <td>data</td>
                            </tr>
                            <tr>
                                <td>data</td>
                                <td>data</td>
                                <td>data</td>
                                <td>data</td>
                            </tr>
                            <tr>
                                <td>data</td>
                                <td>data</td>
                                <td>data</td>
                                <td>data</td>
                            </tr>
                            <tr>
                                <td>data</td>
                                <td>data</td>
                                <td>data</td>
                                <td>data</td>
                            </tr>
                            <tr>
                                <td>data</td>
                                <td>data</td>
                                <td>data</td>
                                <td>data</td>
                            </tr>
                            <tr>
                                <td>data</td>
                                <td>data</td>
                                <td>data</td>
                                <td>data</td>
                            </tr>
                            <tr>
                                <td>data</td>
                                <td>data</td>
                                <td>data</td>
                                <td>data</td>
                            </tr>
                            <tr>
                                <td>data</td>
                                <td>data</td>
                                <td>data</td>
                                <td>data</td>
                            </tr>
                            <tr>
                                <td>data</td>
                                <td>data</td>
                                <td>data</td>
                                <td>data</td>
                            </tr>
                            <tr>
                                <td>data</td>
                                <td>data</td>
                                <td>data</td>
                                <td>data</td>
                            </tr>
                        </table>
                    </div></td>
            </tr>
        </table>
    </div>
    </body>
    </html>
    I think you would be looking at at a javasacript solution if you want to support ie6 and 7.

    It would probably be too difficult to apply the fixed header scenario to that example.

    Hope it helps anyway.

  15. #90
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    I think Yurikolovsky was referring to the fixed headers in the quiz and not your subsequent question

  16. #91
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    For your pair of tables where one scrolls to the height of the other then it's unlikely that you could find a solution without using widths. The reason is that only an absolute element will keep pace with a relative parent and that means the width of the absolute element must be taken into consideration or else elements will overlap because absolute elements are removed from the flow.

    I just had a thought though and enclosed the whole thing in another table with two cells and the closest I could get would be this solution that doesn't work in IE6 and 7 but works in ie8 and elsewhere and has fluid width tables.

    I think you would be looking at at a javasacript solution if you want to support ie6 and 7.

    It would probably be too difficult to apply the fixed header scenario to that example.

    Hope it helps anyway.
    ooooooo, I thought it was a cardinal sin to use tables for layout purposes... =8) hehehe

    Yeah, I have been coming to the conclusion that this is one of those few things that cannot be done under CSS (currently) as it seems to be a chicken-and-egg scenario - when I was describing it for another forum in a more simplistic manner (taking the tables out and just using containers), if container C contains containers A & B side-by-side, I want C to naturally grow to A's height and I also want C to constrain B's height - it sorta showed up that CSS, as it currently is, may not be able to handle it. For future CSS it might be useful to be able to tie a child's height to it's parent's, or vice-versa - that might also solve the faux columns problem, I guess? Anyone know if that is in the future proposals, as it does seem to be a weakness that currently causes a lot of people to have to write hacks (or is that more of a browser implementation problem rather than an issue with the base standard)?

    Thanks for the idea, it's gotta work in IE7 so I'll have to think of a compromise, I guess - unless anyone else can come up with a spark of genius.......

  17. #92
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Mad-Halfling
    ...
    Thanks for the idea, it's gotta work in IE7 so I'll have to think of a compromise, I guess - unless anyone else can come up with a spark of genius.......
    I think it can work in IE7 with Paul's code.

    I tested Paul,s code above like this, without the padding and the width hack:
    Code:
    #outer {
    	position:relative;
    	min-height:0;
    }
    .table1, .table2 {
    	width:auto;
    }
    td {
    	padding:0 10px;
    }
    td td, th {
    	border:1px solid #000;
    	padding:5px;
    	vertical-align:top;
    }
    .table2 {
    	position:absolute;
    	left:auto;
    	top:0;
    	bottom:0;
    	overflow:auto;
    	min-height:0;
       /*   padding:0 20px 0 0; */
    }
    Happy ADD/ADHD with Asperger's

  18. #93
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've went over the post in this thread and was wondering if it's possible to make the height of the table fluid, without using javascript?

    i.e.
    Code:
    .outer {
    position: absolute;
    top: 5px;
    bottom: 10px;
    }
    I've had success making this work in IE8 and FF, but not having any success in IE6 and IE7.
    PHP MySQL Shopping Cart
    www.eprocart.com

  19. #94
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi Iceman,

    It won't work in IE6 I'm afraid because IE6 doesnt understand when you use top and bottom together. IE6 needs either top or bottom but then needs a specific height.

    IE7 does understand top and bottom together but does deem to be buggy with some other parts of the demo then.

    The closest I could get just looking quickly at it is something like this.

    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%;
        overflow:hidden;
        padding:25px 0 0;
        background:#fffccc;
        border:1px solid #000;
        position:absolute;
        top:100px;
        bottom:100px;
    }
    .inner {
        width:100%;
        height:100%;
        overflow:auto;
    }
    *+html .inner {
        position:absolute;
        padding:20px 0 0;
        height:90%;
        bottom:0;
    }
    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>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>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>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>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>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>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>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>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>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>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>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>
    It sort of works in IE7 but won't work in IE6 and you wuld have to change IE6 back to the fixed height version.

  20. #95
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Did some more testing, and came up with this.

    It does seem to work in IE7. Haven't tested IE6, I don't expect it will work though, as you've already said IE6 doesn't understand setting height using top and bottom.

    Seems the key was setting the p tag in my thead to fixed, with a negative top margin. Then absolutely positioning the inner div and setting the height to auto. The rest of the changes were simply cosmetic.

    All I need now is way in which to height the tfoot, without leaving a gap. If you have any suggestions of that I'd be very interested in knowing.

    Thanks again


    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 0}
    table p {margin :0}
    .wrap {
        position:absolute;
    	top: 150px;
    	bottom: 225px;
    	left: 0;
    	right: 0;
        overflow:hidden;
        padding:25px 0 0;
        background:#fffccc;
        border:1px solid #000;
    }
    .inner {
        width:100&#37;;
        height:100%;
        overflow-y: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; position: absolute; top: 20px; bottom: 0; height: auto; }
    table thead p { position: fixed; margin-top: -20px; top: auto; }
    </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>
    PHP MySQL Shopping Cart
    www.eprocart.com

  21. #96
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by iceman2g View Post

    Seems the key was setting the p tag in my thead to fixed, with a negative top margin. Then absolutely positioning the inner div and setting the height to auto. The rest of the changes were simply cosmetic.
    Hi,

    That will work as long as the actual page never scrolls. If you have content under the table that goes higher than the viewport the the fixed header on the table floats over all the content.

    If you don't have anything under the table and this table is within the viewport to start with then you should be ok

    (I notice that the demo I just posted wasn't working properly in IE so ignore it.)

    ll I need now is way in which to height the tfoot, without leaving a gap. If you have any suggestions of that I'd be very interested in knowing.
    I'm not sure what you mean about a height for the tfoot element as that wouldn't seem useful.

  22. #97
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You could fake some height by giving the tfoot some padding though as Paul said I'm wondering why
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  23. #98
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For the page I'm working on there wont be any scrollbars for the viewport. The final layout is designed to occupy the entire viewport without scrolling.


    As for the follow up, I came back to edit initial post and didn't reread the question to make sure it made sense.

    What I meant to say was, I'm looking for a way in which to hide the tfoot so it doesn't appear when I scroll to the final row.

    Hope that clears things up.
    PHP MySQL Shopping Cart
    www.eprocart.com

  24. #99
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You could just hide the tfoot.

    e.g.
    Code:
    tfoot{visibility:hidden;height:0;overflow:hidden}
    Don't use display:none as the tfoot is needed to keep the columns at the correct distance apart to match the header.


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
  •