Sign in to follow this  

[web] DHTML and Tables

This topic is 4664 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

I have a table in an iframe, and another table where there are only headers in the parent document so that I can simulate a "scrollable table" for a huge search result set. The problem now, is that I'd like it to be reusable and that I already have many result set it returns. Say I have in the parent: <table><tr><th id="foo">header</th><th id="bar">tiny</th></tr></table> And in the iframe content: <table> <tr><td id="foo">Something pretty large</td><td id="bar">small</td></tr> ... </table> Now, I'd like to set the width of the TH to the corresponding TD in the children, so that it looks like a table, but the widths aren't fixed and are calculated by the browser. Something like this doesn't appear to work, possibly because I do not set them explicitely : parent.document.getElementById('foo').width=document.getElementById('foo').width; Anmy suggestions would be welcome

Share this post


Link to post
Share on other sites
First off, please don't use Iframes for this (unless perhaps you want to dynamically reload / page through the contents of the table.) Scrollable divs should work great otherwise.

In brief what you are looking for is the "offsetWidth", not the "width". The former will be set all the time. I just whipped up the following code, so it's not well tested. (The "fudgeFactor" is just taking into account the border and cellspacing. It should be constant for a given table, although you could dynamically determine it via a few different ways.)

scroll-table.html

Share this post


Link to post
Share on other sites
Quote:
Original post by konForce
First off, please don't use Iframes for this (unless perhaps you want to dynamically reload / page through the contents of the table.) Scrollable divs should work great otherwise.


I had a similar problem but I couldn't fix it with scrollable div's. Apparently you cannot divide a HTML table like that (either by wrapping the table body in a div with overflow: auto and a set height, or by defining said CSS on the tbody tag).

If you know of a way to make this work with scrollable divs then please do share [smile]

Share this post


Link to post
Share on other sites
Ah yes, you use two tables. I was looking for a solution that only uses one table (for accessibility and printing reasons). Thanks anyway!

Share this post


Link to post
Share on other sites
Care to elaborate on the accessibility and printing issues? For printing you could easily add the header row to the second table as well.

Using CSS, have the print media hide the first header and show the second header when printing.

[table]
[tr][th]columns for showing on the screen[/th][th][/th] <-- hidden on printer
[/table]
[table]
[tr][th]columns for showing on the printer[/th][th][/th] <-- hidden on screen
[tr][td][/td][/tr]
[tr][td][/td][/tr]
[tr][td][/td][/tr]
[tr][td][/td][/tr]
[/table]

It's actually more simple than it sounds...

Share this post


Link to post
Share on other sites
The printing issues are repeating the header on every page you print. Your hidden header solution would solve that yes. Accessibility-wise there is a problem because the data cells are no longer associated with a header. Perhaps a height: 0px; instead of display: none; on the secons header could fix that though. It'll require some testing.

Share this post


Link to post
Share on other sites
Thanks for your replies. I do need to reload the table dynamically, hence the iframe. I'm working on it right now, should get it to work in 10 minutes... the time it'll take me to understand the previous programmer's JSP that is.. [grin]

Share this post


Link to post
Share on other sites

This topic is 4664 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this