[web] DHTML and Tables
Author
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
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
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
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]
... I posted a link in my previous post.
It uses two tables and a bit of trivial javascript to resize the columns.
It uses two tables and a bit of trivial javascript to resize the columns.
Ah yes, you use two tables. I was looking for a solution that only uses one table (for accessibility and printing reasons). Thanks anyway!
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...
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...
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.
Author
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]
This topic is closed to new replies.
Advertisement
Popular Topics
Advertisement
