matching column width 1

[TheConeHead]

I have made a preadsheet looking thing with a table. I have taken out the column headers and put them into a separate table and put that in a div so that they would alway be at the top of the browser window. My problem is that the column widths do not match as the column data is larger than the column heads... is there any way to get them to match?

 

[ChrisHunt]

Try marking up your table like this:

<table>
<thead>
<tr><th>Head1</th><th>Head2</th></tr>
<thead>
<tbody>
<tr><td>Data1</td><td>Data2</td></tr>
<tr><td>Data1</td><td>Data2</td></tr>
<tr><td>Data1</td><td>Data2</td></tr>
<tr><td>Data1</td><td>Data2</td></tr>
</tbody>
</table>

Then apply your always-at-the-top-of-the-screen code to the <thead> instead of using a seperate <div>.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[TheConeHead]

hmmm... always at the top code does not work now... thanks, though...

 

[BillyRayPreachersSon]

If you are fine with specifying the widths for each column, then you could use the "table-layout:fixed" style on both tables, giving each column a width. Then they should all match up.

Hope this helps,
Dan


[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[TheConeHead]

The content is dynamic so there is no way to tell exactly what width it will need to be and it is on a width=100% table...

 

[BillyRayPreachersSon]

Would using JavaScript be acceptable?


[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[TheConeHead]

absolutely

 

[cLFlaVA]

cone,

may i suggest:
[&raquo;] quirksmode tutorial
[&raquo;] slightly different, yet still effective, method

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[TheConeHead]

clFlaVA I will look into that - here's a question though... Is the anyway to have content in a cell, hide it, but have it still impact the cell size? Like display:hidden but have it there to size the cell....

 

[cLFlaVA]

yes;

visibility: hidden;

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[TheConeHead]

visibility: hidden did it - I am just producing the top row of the data and hiding the content - thanks all!

 

[tsdragon]

That will only work if the top row of data contains the longest strings that will be contained in any of the cells. If, for example, one of the strings in one of the cells in the SECOND row is longer, your technique will not work.

Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.

 

[TheConeHead]

thanks, it is data from db so I can control what is showing up for that row - I am grabbing the longest row....