SitePoint Sponsor

User Tag List

Page 1 of 4 1234 LastLast
Results 1 to 25 of 99

Hybrid View

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

    CSS - Test Your CSS Skills Number 22

    CSS - Test Your CSS Skills Number 22 : Quiz now ended - Solution posted in post #69

    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.

    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
    }
    </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

    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: test 2: test 3: test 4: test 5: test 6: test 7: test 8: test9: test10: test11: test12:
    test13: test 14: test 15: test 16: test 17:test18 test 19:
    test 20:
    test 21:
    Attached Images Attached Images

  2. #2
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    hahahahhaa, this is what you call Saturday morning??!

    edit:
    quiz looks promising, im not sure ill be able to try it right away, -workload.

  3. #3
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Thanks for this!

    I'm so swamped with workload that I won't manage this week, bleh. :/
    But I'll try next weekend, if the quiz is still open by then.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,599
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I'm in.
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,599
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I'm very close..ggetting IE6 to work was actually easiest...cmon FF!

    Edit:

    Working everywhere but IE...


    This is a good quiz Paul.

    Edit:

    Very hard...
    Last edited by RyanReese; May 9, 2009 at 07:11.
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  6. #6
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    well, i tried a little of the quiz in my coffee break, and i have to say, this would come it handy for a couple of projects already!

    p.s. gotta love the forums where everyone keeps going "no you can't, its impossible...xD"

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,599
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Gah hard quiz. Scrolling is good..dang thead. This can be done so easily if I could restructure.....

    Ok Firefox is completely done...
    Last edited by RyanReese; May 9, 2009 at 07:58.
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    No only the header stays fixed.

    The footer just scrolls into view at the end of the data as shown on the attachment.

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,599
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Yea that's what I mean. Is it ok for us to have both as stickied?
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Yea that's what I mean. Is it ok for us to have both as stickied?
    As long as you can make it work in all the browsers mentioned then go ahead.

    Remember you must still use only one table and not three

  11. #11
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,599
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I'm not .
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  12. #12
    SitePoint Member
    Join Date
    May 2009
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Good Quiz

  13. #13
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    not easy xD

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Seems I made this one too hard for you all

  15. #15
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    or maybe we just don't like working with tables xD
    or maybe we are full of work
    or maybe we are just lazy
    or maybe we will do it soon

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    lol

  17. #17
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,599
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Lol it's too hard for me...

    Edit-Paul what happens when you vertically resize the window....
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

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

    Edit-Paul what happens when you vertically resize the window....
    Nothing strange happens when you vertically resize the window

    The header isn't fixed using fixed positioning if that's what you were hinting at

  19. #19
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,599
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Nothing strange happens when you vertically resize the window
    Thanks.

    Edit: I think a hint is in order..
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Thanks.

    Edit: I think a hint is in order..
    There is absolutely no way that I am giving a hint on how to position the table header yet.

  21. #21
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sent in a quasi-working solution, as I don't have time to iron out all the wrinkles.
    Birnam wood is come to Dunsinane

  22. #22
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Thanks for the entry Tommy that was more or less the answer I was looking for

    Thanks for taking part and getting this going

  23. #23
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,599
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Whew just did the quiz (I'm in English lol). Answer PM'd. I can't seem to get the header to stretch though...weird.

    Edit:

    I lied I got it to stretch..dang IE7 cache..

    Edit:

    It's more like a glitch to get IE working...not real coding..like a bug
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  24. #24
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Thanks for the entry Ryan.

    Although you have it working in Firefox and IE it is not working anywhere else such as Opera and Safari.

    The main point of the quiz is to have a version that work in all those browsers because as I mentioned at the start Firefox is simple to do (I even gave the answer in the first post) and IE can be made to work with another method but I need a version that works in all and more or less all using the same method for each

    Keep trying (After you've finished your studies of course)

  25. #25
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,599
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Guess I'll have to download one of them to get it working.
    Always looking for web design/development work. Willing to do it cheap to build portfolio!


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
  •