Results 1 to 2 of 2

Thread: td equal width in html5 with varying number of cols

  1. #1
    Join Date
    Feb 2006
    Posts
    236
    Thanks
    8
    Thanked 3 Times in 3 Posts

    Default td equal width in html5 with varying number of cols

    Hi,

    I'm using php to generate the display of retrieved data. The number of columns is unknown until the csv file is parsed and/or database queried. So, I can't use % in the css because of this. Browser uses auto, and that's OK for usual applications, but.....

    In my case, the header is in a table in a div (table 1), another div and table 2 is below for scrolling the long list of data, so that the table 1 heading is always showing at the top of the data, and this works fine. The problem is that the columns don't line up between table 1 and table 2, and of course they wouldn't. I have to format the td make them the same, but how? I can't use fixed width or % width, because I can have (so far) 17, 18, 19, or 20 columns.

    Is there a solution?.....other than having the php do some calculations and then write some jquery?

  2. #2
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,881
    Thanks
    49
    Thanked 266 Times in 258 Posts
    Blog Entries
    56

    Default

    Can't you make it so that the header is part of your table 2 and that each time a column is added to this table, the header is modified too? You wouldn't need table 1 anymore and the header td's and other td's (all inside table 2) would line up between each other. I'm thinking of a situation like this one:
    Code:
    <table>
    <tr>
    <td style="position: fixed; ">fixed</td>
    <td style="position: relative;padding-top: 30px; padding-right: 20px">not fixed<br>not fixed<br>not fixed<br>not fixed<br>not fixed<br>not fixed<br>not fixed<br>not fixed<br>not fixed<br>not fixed<br>not fixed<br>not fixed<br>not fixed<br>not fixed<br>not fixed<br></td>
    
    <td style="position: fixed; ">fixed</td>
    <td style="position: relative;padding-top: 30px; padding-right: 20px">not fixed<br>not fixed<br>not fixed<br>not fixed<br>not fixed<br>not fixed<br>not fixed<br>not fixed<br>not fixed<br>not fixed<br>not fixed<br>not fixed<br>not fixed<br>not fixed<br>not fixed<br></td>
    
    <td style="position: fixed; ">fixed</td>
    <td style="position: relative;padding-top: 30px; padding-right: 20px">not fixed<br>not fixed<br>not fixed<br>not fixed<br>not fixed<br>not fixed<br>not fixed<br>not fixed<br>not fixed<br>not fixed<br>not fixed<br>not fixed<br>not fixed<br>not fixed<br>not fixed<br></td>
    
    <td style="position: fixed; ">fixed</td>
    <td style="position: relative;padding-top: 30px; padding-right: 20px">not fixed<br>not fixed<br>not fixed<br>not fixed<br>not fixed<br>not fixed<br>not fixed<br>not fixed<br>not fixed<br>not fixed<br>not fixed<br>not fixed<br>not fixed<br>not fixed<br>not fixed<br></td>
    
    <td style="position: fixed; ">fixed</td>
    <td style="position: relative;padding-top: 30px; padding-right: 20px">not fixed<br>not fixed<br>not fixed<br>not fixed<br>not fixed<br>not fixed<br>not fixed<br>not fixed<br>not fixed<br>not fixed<br>not fixed<br>not fixed<br>not fixed<br>not fixed<br>not fixed<br></td>
    
    </tr>
    </table>

Similar Threads

  1. Set one element width equal to another
    By Rain Lover in forum JavaScript
    Replies: 4
    Last Post: 06-16-2011, 06:31 PM
  2. using phpmyadmin to order cols
    By james438 in forum Other
    Replies: 4
    Last Post: 08-23-2010, 02:27 AM
  3. two ID cols
    By james438 in forum MySQL and other databases
    Replies: 3
    Last Post: 09-05-2007, 05:27 AM
  4. width not equal in all browsers
    By james438 in forum CSS
    Replies: 1
    Last Post: 08-10-2007, 07:39 AM
  5. How to set table cols and rows
    By sinox in forum MySQL and other databases
    Replies: 2
    Last Post: 05-24-2007, 05:14 AM

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
  •