Solved

Two tables side by side with equal height.

Posted on 2007-12-05
5
790 Views
Last Modified: 2013-11-19
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
/********************************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*************************/

Open in new window

0
Comment
Question by:f_o_o_k_y
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 12

Expert Comment

by:GoofyDawg
ID: 20413793
Yes it is possible. But you can't just set the height of each table to 100%. First of all you have to go a bit lower level, and set "body" and "html" to height:100%, so both base containers for the page occupy 100% of the viewport. Then you can create class called fullHeight or whatever and set height to 100%. Apply this class to each table. You can see an example of this here: http://www.goofydawg.net/tblHeight/. The source code is as follows:


<!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:500px;}
#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" class="fullHeight">
  <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>Row</td></tr>
    <tr><td>Row</td></tr>
    <tr><td>Row</td></tr>
  </table>
</div>
 
 
</body>
</html>

Open in new window

0
 
LVL 11

Author Comment

by:f_o_o_k_y
ID: 20415533
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
<!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>

Open in new window

0
 
LVL 12

Expert Comment

by:GoofyDawg
ID: 20415706
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.

0
 
LVL 11

Author Comment

by:f_o_o_k_y
ID: 20417789
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?
0
 
LVL 12

Accepted Solution

by:
GoofyDawg earned 500 total points
ID: 20417802
Yeah... your route will probably be javascript. Use the offsetHeight of each table, then, then set the smaller's height to the offsetHeight of the larger. That should do the trick.
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Can't get cursor to change 3 16
Use "if not" in a condition 2 19
Allow a tab area under the contents 1 24
Why is my $_POST not going to results page 10 36
Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

749 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question