CSS - Test Your CSS Skills Number 22

**RyanReese** · May 12, 2009 14:08

Originally Posted by Paul O'B

I have another solution from Ryan that is now pretty close and accepted as an entry

Well Done.

I believe the hardest quiz yet...

**YuriKolovsky** · May 13, 2009 04:40

i took a break from all the work i had, and made this quiz work!
hope it qualifies.

RyanReese
I believe the hardest quiz yet...

nah

**RyanReese** · May 13, 2009 04:50

Originally Posted by YuriKolovsky

i took a break from all the work i had, and made this quiz work!
hope it qualifies.

nah

Maybe not for you but this is my first interaction with tables.

**YuriKolovsky** · May 13, 2009 05:13

RyanReese
Maybe not for you but this is my first interaction with tables.

for me too.

so no excuses! xD

**RyanReese** · May 13, 2009 05:20

Sorry...just for clarification

, who got the quiz done first...

lol jk. Can't wait for the answers.

**YuriKolovsky** · May 13, 2009 05:23

i tried it for 15mins a couple of days ago, and i tried it today, if i tried it immediately, i would have gotten it sooner!

but yea, first is first.

**Paul O'B** · May 13, 2009 08:00

Well done Yurikolovsky that works well

Well done yet again.

**fvsch** · May 15, 2009 01:15

Hmm... i might have a try at this. Though i don't really see the point of this less-than-sexy solution to the long table problem. :/

**Paul O'B** · May 15, 2009 02:49

Originally Posted by Florent V.

Hmm... i might have a try at this. Though i don't really see the point of this less-than-sexy solution to the long table problem. :/

That's what most people who can't do it say

**Stomme poes** · May 15, 2009 03:57

You mean, there's a sexier solution?

Just heard someone on another forum wanted to do something like, have a container with two side-by-side tables... the left table isn't very long, and sets the height of the container. Meaning the right table, who does get quite long, is supposed to be scrolled. However the left table isn't a static height but can change, meaning the tables' container can't be a "set" height with overflow.

I expect the solution to this quiz might maybe be part of the solution to this other one.

**Paul O'B** · May 15, 2009 05:44

Originally Posted by Stomme poes

Just heard someone on another forum wanted to do something like, have a container with two side-by-side tables... the left table isn't very long, and sets the height of the container. Meaning the right table, who does get quite long, is supposed to be scrolled. However the left table isn't a static height but can change, meaning the tables' container can't be a "set" height with overflow.

You can do that quite easily for all browsers except IE6 like this.

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;
    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.

**Stomme poes** · May 15, 2009 07:24

Yes they would want one, I think, otherwise scrolling a long table would become painful if the height isn't all that high.

Why I'm sitting here waiting : )

**fvsch** · May 15, 2009 12:12

Originally Posted by Paul O'B

That's what most people who can't do it say

Well tried. Tonge-in-cheek provocation is an efficient way of drawing more participants in. But not good enough.

I maintain that this isn't very interesting, as the end result is not really sexy. And by sexy i mean: decent usability. The main issue with the goal for this exercise is that the table ends up with a fixed height. Why would one want to restrict the available height to display lengthy content? This is the same mistake that websites with a smallish fixed height (like 400 or 500px) do, often in order to keep some header and navigation always visible; only this time it's for a substet of the content.

I may be wrong, but i think an interesting solution to the long table issue would require scripting, as just using position:fixed is not flexible enough (provided it works for THEAD or TH elements, or the elements within a THEAD > TH).

**RyanReese** · May 15, 2009 12:20

I can tell you one reason I would like the header always there-in reallly long tables I would forget the columns, etc. It is always a little reminder. The purpose of this entire thing iss just to see if you can do it.

**YuriKolovsky** · May 15, 2009 12:41

this quiz is more about understanding css than creating a table

**Paul O'B** · May 15, 2009 13:13

Originally Posted by Florent V.

Well tried. Tonge-in-cheek provocation is an efficient way of drawing more participants in. But not good enough.

Oh well.... I tried my best

I maintain that this isn't very interesting, as the end result is not really sexy. And by sexy i mean: decent usability. The main issue with the goal for this exercise is that the table ends up with a fixed height. Why would one want to restrict the available height to display lengthy content? .

Actually it's an often requested function and one that has never been satisfactorily met by any the coders which is why I created it for the quiz.

I can't bear looking at long tables and not knowing to what each column refers. Take this very common page for example where the table is virtually unusable unless you have more than 760px free vertical space on your monitor. Even then it is incredibly difficult to pinpoint which column the data belongs. This would be a cinch in my example and in my book that makes it pretty sexy (to borrow a phrase)

.

I may be wrong, but i think an interesting solution to the long table issue would require scripting, as just using position:fixed is not flexible enough (provided it works for THEAD or TH elements, or the elements within a THEAD > TH

The solution to the quiz doesn't use position:fixed

(No more clues)

I dislike scripted solutions where the table header floats over the table and 99% of the time is a usability nightmare because it gets in the way of the data. Each to their own I suppose

Anyway while I appreciate your comments the questions are really irrelevant because as I always state these quizzes are all about pushing the boundaries of css and about having some fun at the same time. In fact we have filed a number of bug reports in previous quizzes and unearthed hitherto unknown inconcistent behaviour in various browsers. This must be a plus for everyone.

The quizzes don't necessarily have to have a day to day use as that is not the purpose of the quiz. In fact in some of the previous quizzes I explicitly say don't do this for real.

However the techniques learned in the quizzes will stand you in good stead in the future especially when someone tells you "You can't do that with CSS"!

Just take a look at the previous quizzes and you will see that impossible things have been solved and a lot of fun had at the same time.

Remember the main aim is to have fun and to learn something at the same time.

**RyanReese** · May 16, 2009 07:13

When are answers to the quiz going to be given?

**Paul O'B** · May 16, 2009 08:01

Sunday

**Paul O'B** · May 17, 2009 08:07

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.

As I mentioned a number of times this is extremely easy to do in Firefox because you can just set tbody to scroll independently of the headers and footers and is as simple as providing a height and overflow:auto to the tbody element. Unfortunately no other browsers have implemented this so we have to abandon it for this quiz.

As a matter of interest it is possible to have a similar effect in IE due to a bug where elements with position:relative applied become fixed inside an element that has overflow:auto/scroll set. This means a fixed table header can easily b emade to work in IE also as this very old demo shows.

Some of you tried initially to use fixed positioning and although this can work to a degree it will not work once the viewport has scrolled because fixed elements are always placed in relation to the viewport and the header would stay in place long after the table had scrolled away.

The solution involves absolutely placing the content in the table head above the actual table itself by creating a stacking context on a parent element and moving the table head content into some reserved space above the table.

As long as we are repeating the table head data on the table footer then the cells will be sized correctly even if we have absolutely removed the content from the head.

As we can't absolutely position a th element then an inner element was nested (p element) inside the "th" element and that inner p element instead was pushed above the table.

The table itself can't scroll so another wrapper is used around the table and that is the element that carries the scrollbar and will scroll the table within it.

The rest is just minor details and tidying up.

Here is a live example.

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%;
    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>

Winners

The winner of this quiz is Yurikolovsky with Tommy coming a close second and Ryan in third place. Ajaxdinesh was fourth due to the layout only working properly in Firefox.

Here are their solutions.

Yurikolovsky (used 3 ie hacks instead of the 2 allowed)

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>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 {/*this keeps header at top*/
    position:absolute;
    top:0;
}
 
.container th, .container td {/*makes table aestetically pleasing*/
    width:100em; /*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; 
}
 
</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 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>

Tommy (scroll bar on page in IE)

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}
table {
    width:100%;
    border-collapse:collapse;
}
td {
    border:1px solid #000;
    text-align:center;
    background:yellow;
}
th {
    font-weight:bold;
    border:1px solid #000;
    background:#ffffcc;
        text-align:left
}
.scrolled-table {
  position:relative;
  width:100%;
  padding-top:1.5em;
  background:#ffc;
  border:1px solid #000;
}
.scrolled-table-inner {
  width:100%;
  height:9em;
  overflow:auto;
}
.scrolled-table thead th {
  border:none;
}
.scrolled-table thead p {
  position:absolute;
  top:0;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
.scrolled-table-inner {
  width:auto;
  overflow-y:scroll;
  overflow-x:hidden;
}
*+html .scrolled-table-inner {
  padding-right:18px;
}
</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="scrolled-table">
<div class="scrolled-table-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>

Ryan (table headers are not stretching columns though).

Code:

<!doctype html>
<html>
<head>
<title>quiz</title>
<style>
div.tableContainer
{

border: 1px solid #963;

height: 315px;

float:left;
overflow:hidden;
}

div.tableContainer table
{

float: left;/*shrink to fit*/
}
thead.fixed tr
{
/*only the head can have position relative. IE6 glitch*/

}
html>body .fixed tr
{

display: block
}
html>body .fixed tr th
{width:1000px;}
.fixed th
{
background: #ffffcc;
padding: 4px 3px;
text-align: left
}
html>body tbody.scrollContent
{

display: block;

height: 262px;

overflow-y:scroll;
overflow-x:hidden;

width: 100%
}
tbody.scrollContent *
{
height:auto;
}
tbody.scrollContent td, tbody.scrollContent tr td
{

background: yellow;
padding: 2px 3px 3px 4px
}
</style>
<!--[if IE]>
<style>
div.tableContainer
{
    overflow-y:scroll;
}
.iefix
{
    position:relative;
    z-index:0
}
</style>
<![endif]-->
</head>
<body>
<div class="tableContainer">
<table cellpadding="0" cellspacing="0" class="scrollTable">
<thead class="fixed">
<tr class="iefix">
<th>Jan</th>
<th>Feb</th>
<th>Mar</th>
<th>Apr</th>
<th>May</th>
<th>Jun</th>
<th>Jul</th>
<th>Aug</th>
<th>Sep</th>
<th>Oct</th>
<th>Nov</th>
<th>Dec</th>
</tr>
</thead>
<tfoot class="fixed">
<tr>
<th>Jan</th>
<th>Feb</th>
<th>Mar</th>
<th>Apr</th>
<th>May</th>
<th>Jun</th>
<th>Jul</th>
<th>Aug</th>
<th>Sep</th>
<th>Oct</th>
<th>Nov</th>
<th>Dec</th>
</tr>
</tfoot>
<tbody class="scrollContent">
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>

<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr>
<td>End of Cell Content 1</td>
<td>End of Cell Content 2</td>
<td>End of Cell Content 3</td>
<td>End of Cell Content 1</td>
<td>End of Cell Content 2</td>
<td>End of Cell Content 3</td>
<td>End of Cell Content 1</td>
<td>End of Cell Content 2</td>
<td>End of Cell Content 3</td>
<td>End of Cell Content 1</td>
<td>End of Cell Content 2</td>
<td>End of Cell Content 3</td>
</tr>
</tbody>
</table>
</div>

</body></html>

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.

**RyanReese** · May 17, 2009 16:01

Tommy why did you not just remove the scrollbars? It takes no time at all

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">
*{margin:0;padding:0;}
p {margin:0 0 1em}
table p {margin :0}
table {
    width:100&#37;;
    border-collapse:collapse;
}
td {
    border:1px solid #000;
    text-align:center;
    background:yellow;
}
th {
    font-weight:bold;
    border:1px solid #000;
    background:#ffffcc;
        text-align:left
}
.scrolled-table {
  position:relative;
  padding-top:1.5em;
  background:#ffc;
  border:1px solid #000
}
.scrolled-table-inner {
  width:100%;
  height:9em;
  overflow-y:scroll;
overflow-x:hidden;
}
.scrolled-table thead th {
  border:none;
}
.scrolled-table thead p {
  position:absolute;
  top:0;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
.scrolled-table-inner {
  width:auto;
  overflow-y:scroll;
  overflow-x:hidden;
}
*+html .scrolled-table-inner {
  padding-right:18px;
}
</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="scrolled-table">
<div class="scrolled-table-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>

Or have you just not had time?

Next quiz time?

Edit: Lol someone deleted hte post I was about to...sneaky..

**AutisticCuckoo** · May 17, 2009 22:45

Originally Posted by RyanReese

Tommy why did you not just remove the scrollbars?

I just wanted to see if this quiz was as hard as it seemed, since there were no submissions yet. I didn't really have time, but I spent 10 or 15 minutes on it and had something that was close enough. I knew the remaining quirks could be ironed out, but I had to get back to work, so I submitted it to get things started.

**ajaxdinesh** · May 18, 2009 00:13

we can't fix the footer?

**YuriKolovsky** · May 18, 2009 01:05

wow, hahah, i did not expect to win, but YAY nevertheless

p.s. i did not alter the html too much, i could have removed the class="last" in the td's because i did not use it.
(and the 3rd hack is for visual purposes only!)

ajaxdinesh
we can't fix the footer?

We CAN! and its easy

Code CSS:

.container tfoot tr {/*this keeps footer at bottom*/
    position:absolute;
    bottom:0;
}
.container {
	padding-bottom:1.3em;	
}

this is just from the top of my head, but should work.

**ajaxdinesh** · May 18, 2009 01:59

Originally Posted by YuriKolovsky

wow, hahah, i did not expect to win, but YAY nevertheless

p.s. i did not alter the html too much, i could have removed the class="last" in the td's because i did not use it.
(and the 3rd hack is for visual purposes only!)

We CAN! and its easy

Code CSS:

.container tfoot tr {/*this keeps footer at bottom*/
    position:absolute;
    bottom:0;
}
.container {
	padding-bottom:1.3em;	
}

this is just from the top of my head, but should work.

Hi,

I checked this code in safari 3.0.3. Some gap in header and footer but that gap is not come in other browsers.

**YuriKolovsky** · May 18, 2009 02:25

Originally Posted by ajaxdinesh

Hi,

I checked this code in safari 3.0.3. Some gap in header and footer but that gap is not come in other browsers.

i dont have safari 3.03 (i use safari 4, and i cant install v303 because of this)
and according to the internet Safari 3.0.3 is a Beta.

it looks like it repeats the padding 2 times.

edit:
i posted a possibly better version (its on page 4 of this thread)

User Tag List

Thread: CSS - Test Your CSS Skills Number 22

Thread Tools

Display

Bookmarks

Bookmarks

Posting Permissions