CSS - Test Your CSS Skills Number 22 : Quiz now ended - Solution posted in post #69
[SIZE=4][SIZE=2]Hope you enjoyed your break from the quizzes but now its time to turn the tables.
I love it when someone tells me something can’t be done with CSS because 99% of the time it can be done if you think about it hard enough. This quiz is no exception and you once again have to achieve what everyone still says is impossible to do in a cross browser way.
Your mission is to create a data table where the header of the table remains fixed while the data in the table can scroll. This is especially useful for long tables as the header row always stays visible and above the data it refers to.
If you don’t know what I mean then take a look at the attachment which clearly shows what I’m asking for.
Are you back yet?.. Then we’ll continue…
Although I have said that this is impossible to do in a cross browser way is is actually very easy to do in Firefox. All you need do is set the tbody element to overflow:scroll and give it a height and then you get scrolling data with a fixed header.
Unfortunately Firefox is the only browser that supports this and all other browsers fail (although some have limited support).
Therefore your task is to find another method that will work in ie6 - 8, Firefox 2+, safari3 and opera 9.5+ and look more or less the same in each.
I will allow one or 2 (maximum 2) little hacks for IE just to tidy things up but their should be no real forking of the code and the same code should work in all browsers.
No scripting allowed and the CSS and html should be valid. I used css2.1 and 1 css3 rule just to tidy things up but wasn’t really necessary.
More Rules:
Only one table to be used. You can’t put the header data into one table and the data in another table.
The header cells must match the data cells width and therefore would be suitable for dynamic data. This means you can’t simply set a fixed or percentage widths for the header cells and for the data cells to make them match up or use hundreds of margins to push everything into place. It must more or less be automatic.
Don’t use table-layout:fixed to make the cells even as that would be cheating for this quiz.
The table should be a fluid width and expand and contract within reasonable limits but I won’t mind if it breaks at smaller sizes or when the data is completely squashed. As mentioned above the header cells and data cells will stretch together.
No scripting.
I will provide a basic html because I’m feeling generous but you can change this to suit. I will mention that my examples seen in the screenshot actually need no changes to the table html at all. However feel free to change the html and css as you wish as you may find a better method than mine.
<!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
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
</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>
<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>
</body>
</html>
Remember that you must make sure that it works before you send it to me
Do not post your answers here but PM them to me so that others can have a go without seeing your answers.
Any questions just ask and remember this is just for fun
[/SIZE][/SIZE]Solutions to the quiz will be posted at the end of the week (or longer) depending on how it goes
Have fun .
Paul
PS. : In case you missed the other tests you can find them here:
test 1: [URL=“http://www.sitepoint.com/forums/showthread.php?t=169710”]test 2: [URL=“http://www.sitepoint.com/forums/showthread.php?t=170190”]test 3: [URL=“http://www.sitepoint.com/forums/showthread.php?t=171221”]test 4: [URL=“http://www.sitepoint.com/forums/showthread.php?t=172472”]test 5: [URL=“http://www.sitepoint.com/forums/showthread.php?t=173786&highlight=test+css+skills”]test 6: [URL=“http://www.sitepoint.com/forums/showthread.php?p=3216244#post3216244”]test 7: [URL=“http://www.sitepoint.com/forums/showthread.php?p=3235664#post3235664”]test 8: [URL=“http://www.sitepoint.com/forums/showthread.php?p=4108145#post4108145”]test9: [URL=“http://www.sitepoint.com/forums/showthread.php?p=4119063#post4119063”]test10: [URL=“http://www.sitepoint.com/forums/showthread.php?t=595943”]test11: [URL=“http://www.sitepoint.com/forums/showthread.php?t=597256”]test12:
test13: [URL=“http://www.sitepoint.com/forums/showthread.php?t=600332”]test 14: [URL=“http://www.sitepoint.com/forums/showthread.php?t=601564”]test 15: [URL=“http://www.sitepoint.com/forums/showthread.php?t=602808”]test 16: [URL=“http://www.sitepoint.com/forums/showthread.php?t=604228”]test 17:[URL=“http://www.sitepoint.com/forums/showthread.php?t=605819”]test18 [URL=“http://www.sitepoint.com/forums/showthread.php?p=4218017#post4218017”]test 19:
test 20:
test 21:
