Log in

View Full Version : td equal width in html5 with varying number of cols



Strangeplant
09-29-2014, 04:23 PM
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?

molendijk
09-30-2014, 02:05 PM
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:


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