/    Sign up×
Community /Pin to ProfileBookmark

Table alignment problem with result set

Copy linkTweet thisAlerts:
Sep 08.2004

I have two tables: one table forms the header columns
and the other table is in an iframe returning the results of an
sql query. The query works fien and returns the appropriate data
but the rendering of the columns in the top table does notmatch
those in the iframe table, even though they are supposed to be the same width!!

The iframe table has a scroll bar and the data returned sizes each column cell
dependant on the amount of data returned regardless if i stipulate a set width!!

As you can imagine this is visually poor as the table columns are not correct for both tables!!

Has anyone idea of what i could do? Could i use javascript to set the width of the header columns when the iframe columns load and i know what width they are?

Sample header table and iframe table attached.

Many thanks in advance.

Cheers

[upl-file uuid=b459fdc8-8aed-46e0-8bfc-e2f4e4e764fc size=3kB]header table and iframe table sample.txt[/upl-file]

to post a comment
JavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@HaganeNoKokoroSep 08.2004 — if you assign all the tds in the header table and (at least) the first row of the data table id attributes, it can be done.

You would, in the document that goes in the iframe, create a function for the onload event handler that resizes the columns.

Below is the quickest example I could cook up. In my example, I gave all the table header columns ids like "th1" and all the data columns ids like "td1". mytable.html is intended to be the content document with your resultset, so play around with a few columns and see how it shapes up. The file you should actully view in a webbrowser is tabletest.html.

P.S. I tried this out in IE6 and Netscape7, which are the only browsers I have. No clue if it works well in others.

Also, if someone else can come up with a better way, fell free to trash mine; I know it's not a particularly good solution. Something non-javascript, as many will doubtless point out, would be nice, but I can't figure out a way.

[upl-file uuid=a710792e-c7ba-4803-bf49-73884e76d944 size=685B]tables.zip[/upl-file]
Copy linkTweet thisAlerts:
@karlmcauleyauthorSep 09.2004 — Thanks for your reply.

On the whole it seems to work, but only if i dont have any scroll bars present in the iframe table page. More often than not the returned sql query will be long enough to go off the page and as such needs to remain scrollable!! and if its scrollable the column aligment is slightly out of zinc with its header.!!!

Any ideas?

Anyway i can counteract the scroll bar yet not impinge upon the width of any other column??

Cheers
×

Success!

Help @karlmcauley spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...