Trying to make 2 tables appear in the same "place"

[meckeard]

All,

Not sure if this is a CSS or Javascript question, so I'm starting here.

I have 2 tables that appear stacked, meaning 1 looks as though it sits on top of or appears above the second one:

<table id="tblTable1"></table>
<table id="tblTable2"></table>

I have some Javascript that hides/shows one of these 2 tables based on a selection from a dropdownlist.

My question is this...how can I make it appear as though both tables take up the same space instead of 1 over the other? Almost as if they were stacked on top of each other and only 1 would appear at once, however each one taking up the exact same space or position on the web page. Isn't there a CSS property that controls this?

Thanks,
Mark

 

[cLFlaVA]

instead of using [tt]display: none;[/tt] use [tt]visibility: hidden;[/tt]

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[meckeard]

clflava,

Here is what I am using to hide the 2 tables when the page loads:

document.getElementById("tblTable1").style.visibility='hidden';

document.getElementById("tblTable2").style.visibility='hidden';

Because of this, the outer table cell that holds these 2 tables increases in height and I don't want that to happen. I want it to appear as tho both occupy the same space.

Thanks.

 

[cLFlaVA]

oh, whoops. then use

[tt]display: none;[/tt]

have you tried that?

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[kaht]

I was in the middle of typing out the test when cory corrected himself. I'll post it anyway:
(excuse me using tables for the layout, I'm not strong using float layouts yet)

<script language="javascript">
function vis(str) {
   obj = document.getElementById(str);
   obj.style.visibility = (obj.style.visibility == "visible") ? "hidden" : "visible";
}
function dis(str) {
   obj = document.getElementById(str);
   obj.style.display = (obj.style.display == "block") ? "none" : "block";
}
</script>
<style type="text/css">
table {
   border:1px solid #0000ff;
}

td {
   border:1px solid #000000;
   height:100px;
   width:100px;
}
</style>
<table>
   <tr>
      <th colspan="2">
         Visibility Test
      </th>
   </tr>
   <tr>
      <td>
         Table1
      </td>
      <td rowspan="2" style="vertical-align:top">
         <table id="vtbl1" style="visiblity:visible"><tr><td>This is table1</td></tr></table>
         <table><tr><td>This is table2</td></tr></table>
      </td>
   </tr>
   <tr>
      <td>
         Table2
      </td>
   </tr>
</table>
<input type="button" value="Toggle Table1" onclick="vis('vtbl1')">
<table>
   <tr>
      <th colspan="2">
         Display Test
      </th>
   </tr>
   <tr>
      <td>
         Table1
      </td>
      <td rowspan="2" style="vertical-align:top">
         <table id="dtbl1" style="display:block"><tr><td>This is table1</td></tr></table>
         <table><tr><td>This is table2</td></tr></table>
      </td>
   </tr>
   <tr>
      <td>
         Table2
      </td>
   </tr>
</table>
<input type="button" value="Toggle Table1" onclick="dis('dtbl1')">

-kaht

...looks like you don't have a job, so why don't you get out there and feed Tina.

 

[meckeard]

clflava,

Yes, that did work to hide the 2 tables initially. Now what can I do to show/hide either of them?

Here is what I had before that did work for showing and hiding them but it didn't make the 2 tables seem as if they took the same space on the page:

document.getElementById("tblTable1").style.visibility='visible';

document.getElementById("tblTable2").style.visibility='hidden';

kaht - thanks for the code. It works but not quite as I need it to. The tables need to appear as tho they take up the exact same space on the page, not as if 1 is over the other. I know this may be hard to explain, but imagine placing 1 hand directly over the other one. This is what I am trying to do.

Thanks.

 

[cLFlaVA]

this is a javascript question. for the javascript forum. or use kaht's code above.

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[kaht]

not as if 1 is over the other
......
but imagine placing 1 hand directly over the other one

Am I the only one confused by this explanation?

-kaht

...looks like you don't have a job, so why don't you get out there and feed Tina.

 

[cLFlaVA]

no.

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]