Geek Answers Handbook

Trying to get table height = 100% in Chrome

I am trying to make a table that expands when clicked, so it starts as one row, then two, then three, etc., but remains at 100% height. This works fine in FF, IE, and Opera, but when I added the third line in Chrome, now it starts at 50% versus 100%.

I’ve been looking around for ages, and since this is for the exam review plan for several days, I have run out of time a bit haha.

So yes, if anyone can offer any help that would be very helpful and much appreciated.

(I think I should not publish all my code, so I will try to reduce it to only the corresponding bits without style tags, and what not - if someone wants me to publish everything else that I can)

function toggleSub() { if( document.getElementById("hideSub").style.display=='none' ){ document.getElementById("hideSub").style.display = ''; }else{ document.getElementById("hideSub").style.display = 'none'; document.getElementById("hideNeuro").style.display = 'none'; document.getElementById("hideAtypicalBlank").style.display = 'none'; document.getElementById("hideAtypical").style.display = 'none'; } } function toggleNeuro() { if( document.getElementById("hideNeuro").style.display=='none' ){ document.getElementById("hideNeuro").style.display = ''; document.getElementById("hideAtypicalBlank").style.display = 'none'; }else{ document.getElementById("hideNeuro").style.display = 'none'; if(document.getElementById("hideAtypical").style.display == '') document.getElementById("hideAtypicalBlank").style.display = ''; } } function toggleAtypicalBlank() { if( document.getElementById("hideAtypicalBlank").style.display=='none' && document.getElementById("hideNeuro").style.display=='none'){ document.getElementById("hideAtypicalBlank").style.display = ''; }else{ document.getElementById("hideAtypicalBlank").style.display = 'none'; } } function toggleAtypical() { if( document.getElementById("hideAtypical").style.display=='none' ){ document.getElementById("hideAtypical").style.display = ''; }else{ document.getElementById("hideAtypical").style.display = 'none'; } } table#table3{ margin:0; padding:0; height:100%; border:none } <table border="1" id="table3" width="100%"> <tr> <th colspan="2"><span onClick="toggleSub();">Drug Therapy</span></th> </tr> <tr id="hideSub" style="display:none;" > <td width="50%"><span onClick="toggleNeuro();">Neuroleptics</span> </td> <td width="50%"><span onClick="toggleAtypical();toggleAtypicalBlank()">Atypical</span> </td> </tr> <tr> <td id="hideNeuro" style="display:none;">blah blah blah </td> <td id="hideAtypicalBlank" style="display:none;"> </td> <td id="hideAtypical" style="display:none;">blah blah blah </td> </tr>

+4
source share
3 answers

http://jsfiddle.net/mazlix/FLpFR/ works for me in both chrome and firefox, could you tell me if this will give you problems. Are you using the latest version of chrome?

+1
source

It seems that for Chrome you need to make a row display:none table as well as table cells.

In this JSFiddle, I set the third row of the display:none table at startup and added the updateRow3 function to set the third row to display:none or not, depending on whether any of its table cells are visible.

+1
source

It was clear that if you enter a style into a table row and give it a height of 100%, it will work. So another way to do this is to give each row in the table the percentage height, and then change the height accordingly using JS. I can send a code for this if you want.

0
source

More articles:


All Articles