f_o_o_k_y
asked on
Two tables side by side with equal height.
Hello
I have 2 tables one on left and one on right.
I need to do something to have both tables same height. but each table have different number of rows.
I dont know which one will be heigher. Also atble on left side usualy have row height 1em and row in table on right usuale have multiple lines.
Is it posible to have both table the same height?
Best Regards
Fooky
I have 2 tables one on left and one on right.
I need to do something to have both tables same height. but each table have different number of rows.
I dont know which one will be heigher. Also atble on left side usualy have row height 1em and row in table on right usuale have multiple lines.
Is it posible to have both table the same height?
Best Regards
Fooky
/********************************myhtml.html*************************/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<link rel="stylesheet" href="mycss.css" type="text/css">
<title></title>
</head>
<body>
<div id="div1">
<table class="tab1">
<tr>
<td colspan="6"> Table 1 - Left </td>
</tr>
<tr>
<th>
header
</th>
<th>
header
</th>
<th>
header
</th>
<th>
header
</th>
<th>
header
</th>
<th>
header
</th>
</tr>
<tr>
<td>
data
</td>
<td>
data
</td>
<td>
data
</td>
<td>
data
</td>
<td>
data
</td>
<td>
data
</td>
</tr>
<tr>
<td>
data
</td>
<td>
data
</td>
<td>
data
</td>
<td>
data
</td>
<td>
data
</td>
<td>
data
</td>
</tr><tr>
<td>
data
</td>
<td>
data
</td>
<td>
data
</td>
<td>
data
</td>
<td>
data
</td>
<td>
data
</td>
</tr><tr>
<td>
data
</td>
<td>
data
</td>
<td>
data
</td>
<td>
data
</td>
<td>
data
</td>
<td>
data
</td>
</tr><tr>
<td>
data
</td>
<td>
data
</td>
<td>
data
</td>
<td>
data
</td>
<td>
data
</td>
<td>
data
</td>
</tr>
</table>
<table class="tab2">
<tr>
<td colspan="2"> Table 2 - Right </td>
</tr>
<tr>
<th>
header
</th>
<th>
header
</th>
<th>
header
</th>
</tr>
<tr>
<td>
data
</td>
<td>
data
</td>
<td>
VERY long data :
Lorem ipsum dolor sit amet consectetuer porttitor Aliquam elit laoreet ac.
Congue tortor metus et nulla ridiculus eget et urna ut nisl. At a Integer
non risus Nullam nec Aliquam id convallis interdum. Turpis feugiat id pede
dui enim mus consequat elit eu hendrerit. Nibh sem semper odio lacus vitae
accumsan et justo vel id. Vestibulum purus orci Vivamus quis nonummy
consectetuer Morbi amet.
</td>
</tr>
<tr>
<td>
data
</td>
<td>
data
</td>
<td>
VERY long data :
Lorem ipsum dolor sit amet consectetuer porttitor Aliquam elit laoreet ac.
Congue tortor metus et nulla ridiculus eget et urna ut nisl. At a Integer
non risus Nullam nec Aliquam id convallis interdum. Turpis feugiat id pede
dui enim mus consequat elit eu hendrerit. Nibh sem semper odio lacus vitae
accumsan et justo vel id. Vestibulum purus orci Vivamus quis nonummy
consectetuer Morbi amet.
</td>
</tr>
<tr>
<td>
data
</td>
<td>
data
</td>
<td>
VERY long data :
Lorem ipsum dolor sit amet consectetuer porttitor Aliquam elit laoreet ac.
Congue tortor metus et nulla ridiculus eget et urna ut nisl. At a Integer
non risus Nullam nec Aliquam id convallis interdum. Turpis feugiat id pede
dui enim mus consequat elit eu hendrerit. Nibh sem semper odio lacus vitae
accumsan et justo vel id. Vestibulum purus orci Vivamus quis nonummy
consectetuer Morbi amet.
</td>
</tr>
</table>
</div>
<div style="clear:both;" />
</body>
</html>
/********************************myhtml.html*************************/
/********************************mycss.css*************************/
#div1{
}
.tab1{
float: left;
border: 1px yellow solid;
margin-right: 10px;
width: 30%;
}
.tab2{
float: right;
border: 1px pink solid;
margin-right: 10px;
width: 66%;
}
td{
border: 1px black dashed;
}
/********************************mycss.css*************************/
ASKER
Ok. I understand.
But I dont know how height should be #contDiv.
Its not working if for tbl2 is heigher than #contDiv
This is an example when its not working.
Best Regards
FooKy
But I dont know how height should be #contDiv.
Its not working if for tbl2 is heigher than #contDiv
This is an example when its not working.
Best Regards
FooKy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Page title</title>
<style type="text/css">
html,body {margin:0;padding:0;height:100%;border:0;}
#contDiv {height:300px;}
#tbl1 {width:300px;float:left;border:1px solid blue;}
#tbl2 {width:300px; margin-left:1em;border:1px solid blue;}
.fullHeight {height:100%}
.clr {clear:both;height:1px;margin-top:-1px;overflow:hidden;font-size:1px;}
</style>
</head>
<body>
<div id="contDiv" >
<table id="tbl1" class="fullHeight">
<tr><td>Row</td></tr>
<tr><td>Row</td></tr>
<tr><td>Row</td></tr>
</table>
<table id="tbl2" class="fullHeight">
<tr><td>Row</td></tr>
<tr><td>Row</td></tr>
<tr><td>Row</td></tr>
<tr><td> VERY long data :
Lorem ipsum dolor sit amet consectetuer porttitor Aliquam elit laoreet ac.
Congue tortor metus et nulla ridiculus eget et urna ut nisl. At a Integer
non risus Nullam nec Aliquam id convallis interdum. Turpis feugiat id pede
dui enim mus consequat elit eu hendrerit. Nibh sem semper odio lacus vitae
accumsan et justo vel id. Vestibulum purus orci Vivamus quis nonummy
consectetuer Morbi amet.
</td></tr>
<tr><td> VERY long data :
Lorem ipsum dolor sit amet consectetuer porttitor Aliquam elit laoreet ac.
Congue tortor metus et nulla ridiculus eget et urna ut nisl. At a Integer
non risus Nullam nec Aliquam id convallis interdum. Turpis feugiat id pede
dui enim mus consequat elit eu hendrerit. Nibh sem semper odio lacus vitae
accumsan et justo vel id. Vestibulum purus orci Vivamus quis nonummy
consectetuer Morbi amet.
</td></tr>
<tr><td> VERY long data :
Lorem ipsum dolor sit amet consectetuer porttitor Aliquam elit laoreet ac.
Congue tortor metus et nulla ridiculus eget et urna ut nisl. At a Integer
non risus Nullam nec Aliquam id convallis interdum. Turpis feugiat id pede
dui enim mus consequat elit eu hendrerit. Nibh sem semper odio lacus vitae
accumsan et justo vel id. Vestibulum purus orci Vivamus quis nonummy
consectetuer Morbi amet.
</td></tr>
</table>
</div>
</body>
</html>
Right, because the container div is a fixed height. I only wrapped the two tables with a container to demonstrate that if you set body and html to 100%, then set 100% to the tables, the tables will fill the vertical height of their container. In this case, it's #contDiv, but you could use pretty much any container. I just happened to use a fixed-height container for demonstration purposes only.
However, if you happen to run into this situation where one of your contained tables exceeds the size of your container, you'll have to make adjustments to the container's height either via JavaScript, or size the container to a percentage height.
However, if you happen to run into this situation where one of your contained tables exceeds the size of your container, you'll have to make adjustments to the container's height either via JavaScript, or size the container to a percentage height.
ASKER
In my situation its posible that bothe table will be heigher than 100%.
100% (its height of screen? am I wright?)
Also under this table there will be 3rd table and all this will be in one container.
I was also trying to use table as a container but also could not make smaller table to be larger than 100%.
So I asume I need to use javascript and set smaller table height of the bigger one.
Any other option?
100% (its height of screen? am I wright?)
Also under this table there will be 3rd table and all this will be in one container.
I was also trying to use table as a container but also could not make smaller table to be larger than 100%.
So I asume I need to use javascript and set smaller table height of the bigger one.
Any other option?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Open in new window