SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question about Paul's freeze table header quiz

    This quiz is exactly the fix I was hoping to find. I've been wanting to make some minor modifications to it and can't figure out how to do them. Are any or all of these possible? If so, how?

    1. Add a bottom border to the frozen th line?
    2. Add borders to the th's within frozen th?
    3. Center the text within the th paragraphs?


    I removed the border:none from thead th and replaced it with a border but it doesn't show. I thought maybe giving the thead tr p a background or background-color of transparent would do it but that hasn't made the borders appear either. Help?

  2. #2
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I thought of some additional questions about this post. Is it possible to:

    1. Use br tags in the p tags in the frozen th row to allow for double line text on some columns
    2. Have the table columns shrink-wrap the text and yet keep the vertical scroll-bar right next to the table like it is in the original

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

    You should be able to add borders although they might vary between browsers but you'd need to apply them to the p element. You should also be able to ibncrease the height of the header although it has to be done manually.

    e.g.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    p {
        margin:0 0 1em
    }
    table p {
        margin :0
    }
    .wrap {
        margin:50px 0 0 2&#37;;
        width:95%;
        float:left;
        position:relative;
        height:200px;
        overflow:hidden;
        padding:50px 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;
        width:100%;
        border-bottom:1px solid #000;
        border-left:2px solid #000;
        height:46px;
        margin-left:-6px;
        padding:0 3px 3px;
    }
    .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<br>(test)</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<br>test2</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>
    I don't think the header can be centred because it is absolutely placed into position - (although that doesnt mean its impossible but that I just haven't found a way to do it yet).

    Have the table columns shrink-wrap the text and yet keep the vertical scroll-bar right next to the table like it is in the original
    Not quite sure what you are getting at there?

  4. #4
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. That gets most of what I was wanting. Here's an example of what I meant by getting the columns to shrink-wrap the text and yet keep the vertical scroll-bar right next to the table. Here's a link to a sample table. I've hard-coded in some data but it will eventually be populated dynamically:

    Sample Table

    At "medium" kinds of resolutions, it looks fine, but at higher res, the columns widen so much that it makes the data a little hard to read (this screenshot was taken at 1440x900):

    Nice but overly wide columns

    I tried removing the width from the table and the inner wrap, but I got the link below - which obviously isn't good for a couple of reasons - one being the scroll bar doesn't hug the table (which also adds the blue background which is distracting) and the second being the one th p text that extends to far. I could deal with that one th by just changing the text - or maybe giving all table cells a bit more padding. But I don't know if there's a way to have the table shrink-wrap and still get the scroll bar to hug the table's right side. Here's the screenshot with the widths removed:

    Easier to read but ugly

    Any ideas?

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    It might be easier just to set a max-width iof you don;t want it to get too big.

    In my example that would be applied here:
    Code:
    .wrap {
        margin:50px 0 0 2&#37;;
        width:95%;
        float:left;
        position:relative;
        height:200px;
        overflow:hidden;
        padding:50px 0 0;
        background:#fffccc;
        border:1px solid #000;
         max-width:1024px;
    }

  6. #6
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, thanks. I'll play with it.


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
  •