Results 1 to 2 of 2

Thread: Table headers are disportional in relation to the table width

  1. #1
    Join Date
    Oct 2011
    Posts
    46
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default Table headers are disportional in relation to the table width

    Hello,

    I really need the help from the experts on this one.

    I can't really seem figure out as to why my table header are so disproportional to the table width itself. It just doesn't make any sense to me. Help =\

    Here is the HTML markup:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    
    <style type="text/css">
    
    /*------------------------------------------------------------------
    Table Style
    ------------------------------------------------------------------ */
    table a:link {
        color: #666;
        font-weight: bold;
        text-decoration:none;
    }
    table a:visited {
        color: #999999;
        font-weight:bold;
        text-decoration:none;
    }
    table a:active,
    table a:hover {
        color: #bd5a35;
        text-decoration:underline;
    }
    table {
        font-family:Arial, Helvetica, sans-serif;
        color:#666;
        font-size:12px;
        background:#eaebec;
        border-collapse:collapse;
        border-spacing: 0;
        table-layout: fixed;
        width: 100%;
    }
    table th {
        border-bottom:1px solid #e0e0e0;
        border-right: 1px solid #e0e0e0;
        background: #ededed;
    }
    table th:first-child {
        text-align: left;
    }
    table tr:first-child th:first-child {
        border-left: 0;
    }
    
    table td:first-child {
        text-align: left;
        border-left: 0;
    }
    table td {
        border-bottom:1px solid #e0e0e0;
        border-right: 1px solid #e0e0e0;
        background: #fafafa;
    }
    table th, table td {
    	padding: 10px;
    	width: 200px;
    }
    table tr:last-child td {
        border-bottom: 0;
    }
    
    
    table tr:hover td {
        background: #f2f2f2;
    
    }
    
    #wrapper {
        width: 100%;
        height: 200px;
        overflow-x: scroll;
        overflow-y: scroll;
        border: 1px solid rgb(205,205,205);
    }
    table thead {
        position:fixed;
    
    }
    
    table td > div {
       overflow: hidden;
       white-space: nowrap;
    }
    
    
    </style>
    
    </head>
    
    <body>
    
    <div id="wrapper">
    <table>
    
        <!-- Table Header -->
        <thead>
            <tr>
                <th>Task Details</th>
                <th>File Number</th>
                <th>Firstname</th>
                <th>Progress</th>
                <th>Vital Task</th>
            </tr>
        </thead>
        <!-- Table Header -->
    
        <!-- Table Body -->
        <tbody>
    
            <tr>
                <td>Create</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>100%</td>
                <td>Yes</td>
            </tr><!-- Table Row -->
    
            <tr>
                <td>Take the dog</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>100%</td>
                <td>Yes</td>
            </tr><!-- Darker Table Row -->
    
            <tr>
                <td>Waste half</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>20%</td>
                <td>No</td>
            </tr>
    
            <tr>
                <td><div>Feel inferior</div></td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>80%</td>
                <td>No</td>
            </tr>
    
            <tr>
                <td><div>Some long text that shouldn't resize the box</div></td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>100%</td>
                <td>Yes</td>
            </tr>
    
            <tr>
                <td><div>Vow to complete</div></td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>23%</td>
                <td>yes</td>
            </tr>
    
            <tr>
                <td>Procrastinate</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>80%</td>
                <td>No</td>
            </tr>
    
            <tr>
                <td><a href="#yep-iit-doesnt-exist">Hyperlink Example</a></td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>80%</td>
                <td><a href="#inexistent-id">Another</a></td>
            </tr>
    
        </tbody>
        <!-- Table Body -->
    
    </table>
    </div>
    
    </body>
    </html>
    Much thanks and appreciation for all your help.

    Cheers,

    Jay

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,963
    Thanks
    16
    Thanked 305 Times in 304 Posts
    Blog Entries
    11

    Default

    I'm not sure this can be done 'perfectly' without JavaScript or some markup-mashing.

    - Alt Option 1 - Use JavaScript https://www.google.co.uk/#q=fixed+table+header+jquery

    - Alt Option 2 - Separate the markup so the header is in one table and the table body cells are in another, then position the header table absolutely with a higher z-index.

    That being said, I did play around with the sample markup you provided and adding this CSS gives something workable, with a few caveats;
    Code:
    table { 
    	position:relative; 
    	width:100%;
    	min-width:604px; /* optional - helps maintain visual consistency/integrity of table cell structure */ 
    }
    table thead tr {
    	display:table;
    	position:fixed;
    	width:calc(100% - 33px); /* 100% width less 2 sets of scrollbars at 16px each, and a 1px border */
    }
    table thead th { 
    	width:20%; /* equal division of th to match td */
    	min-width:100px; /* optional - helps maintain visual consistency/integrity of table cell structure */
    	border-right:0; /* optional - cross browser visuals - borders go 1px 'off' in diff browsers at diff widths */
    }
    calc() is only supported in IE9 and up http://caniuse.com/calc Other modern browsers *should* be OK.

    Setting minimum widths on the overall table and th cells help maintain visual consistency in a fluid environment. Without it, the header cells visibly come 'unstuck' from the table body cells, which look a bit rubbish and gets confusing. But even with the fixed width, the headers will still flow off over the edge of the scrollbar on the right when the window becomes too narrow. Not hugely obvious in the example, but something to bare in mind if you change the header background colour to something other than light grey.

    Removing the border on the th cells looks better across browsers. With them, when the window is resized, the odd one gets thrown out of whack by a pixel or so - unpredictably in different browsers due to differences with pixel rendering. If you use this border-right:0; option, you will probably want to nudge the calc() values from 33px to 32px too.
    Last edited by Beverleyh; 03-20-2014 at 12:07 PM.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

Similar Threads

  1. Table Headers
    By Austin Klei in forum Looking for such a script or service
    Replies: 3
    Last Post: 03-08-2010, 08:18 AM
  2. Table width in IE vs FF
    By chas in forum HTML
    Replies: 0
    Last Post: 05-18-2009, 07:51 AM
  3. table width
    By kpw in forum HTML
    Replies: 8
    Last Post: 06-07-2007, 11:53 PM
  4. Scrolling Table Headers ?!?!
    By Conc06 in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 12-13-2006, 02:02 PM
  5. table width
    By annies44 in forum HTML
    Replies: 5
    Last Post: 04-23-2006, 08:35 PM

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
  •