/    Sign up×
Community /Pin to ProfileBookmark

Equal row heights in paralell tables.

Copy linkTweet thisAlerts:
Jun 18.2007

Hi. (posted here since I couldn’t decide on HTML/CSS/javascript)

I have two tables (foo and bar) that are dynamically populated.
I need these two tables to have equal rowheights (due to the left
table acting as frozen coulumns)

Currently I’m doing this with the following javascript.

[CODE]
for (var i = 0; i < foo.rows.length; i++) {
if (foo.rows[i].clientHeight != bar.rows[i].clientHeight) {
if (foo.rows[i].clientHeight > bar.rows[i].clientHeight)
bar.rows[i].style.height = foo.rows[i].clientHeight;
if (bar.rows[i].clientHeight > foo.rows[i].clientHeight)
foo.rows[i].style.height = bar.rows[i].clientHeight;
}
}
[/CODE]

This however is way to slow, (particularly in IE) so I need
another solution.

Any suggestions?

—
dings

to post a comment
HTML

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@KDLAJun 18.2007 — You could use CSS to designate this:
<i>
</i>&lt;style type="text/css"&gt;
td {height: 50px; overflow: visible;}
&lt;/style&gt;

This will make all the table cells on the page 50px tall; if the contents exceed that, the height will expand. Does not require javascript.

KDLA
Copy linkTweet thisAlerts:
@dignsauthorJun 19.2007 — Tank you for responding.

Well my problem is make the corresponding rows in two tables

have equal height. The two tables are floated beside each other

the left one acting as "frozen columns" for the right one.

Since bouth tables are populated dynamically I don't know how

much will be in each cell, so I need to take care of the heights

somehow.

Example here:

http://home.samfundet.no/~lekang/test/test.html

(test.js, test.css)

--

dings
Copy linkTweet thisAlerts:
@KDLAJun 19.2007 — You might take a look at [url="http://www.shrutigupta.com/index.php/2005/12/12/how-to-create-table-with-first-column-frozen/"]this[/url].
Copy linkTweet thisAlerts:
@dignsauthorJun 19.2007 — Thanks, that looks very promising.

I've been trying all kinds of grids (bloated for my needs)

this seems to be just about what I need ?

I'll try it out presently.

Many thanks

--

dings
Copy linkTweet thisAlerts:
@dignsauthorJun 19.2007 — No, didn't seem to do the trick afterall.

I tested it a bit here:

http://home.samfundet.no/~lekang/test2/test.html

It will not assure me equal row heights. It seems to

have hardcoded heights, using a class long_ht for the

one header that was bigger. I need this to be dynamic

since my tables are dynamically populated.

Im back with my original, wich I can't use, since looping

through rows is to slow ?

http://home.samfundet.no/~lekang/test/test.html

--

dings.
×

Success!

Help @digns 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 4.28,
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: @Yussuf4331,
tipped: article
amount: 1000 SATS,

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

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...