Jump to content
  • Advertisement
Sign in to follow this  
jfclavette

[web] DHTML and Tables

This topic is 4970 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
Advertisement
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
... I posted a link in my previous post.

It uses two tables and a bit of trivial javascript to resize the columns.

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
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!