table width in firefox not expanding to fill space

[jaundice]

Hello,

I have very limited experience with web development so apologies if this is a stupid question. I'm using some code I found online to show/hide a table using javascript. Everything works as it should EXCEPT that in Firefox rather than having the table auto-size each column to fill up the entire width (900px), the table uses the minimum width for each column necessary to display all of the data.

I've tried a number of things (setting overflow, manually specifying div width or table width, etc.) but nothing seems to get it to take up the full width as it does in IE and Chrome.

You can see the page / code here: http://maps.tnc.org/tableexample.html#webmaps

The javscript I'm using is:

<script type="text/javascript">
function showHide(_myObj,_action) {
    var _myTableObj = document.getElementById((_myObj.parentNode.id).substring(0,(_myObj.parentNode.id).indexOf('_')));
    if (_action == 'show') {
        _myTableObj.style.display = 'block';
        _myObj.parentNode.innerHTML = '<a href="#webmaps" onclick="showHide(this,\'hide\');"><img src="./files/images/minus_24.png" style="border-style: none">Hide Web Maps from Field Programs</a> (put your mouse over the word &quot;summary&quot; after each map to see more about it)';
    }
    if (_action == 'hide') {
        _myTableObj.style.display = 'none';
        _myObj.parentNode.innerHTML = '<a href="#webmaps" onclick="showHide(this,\'show\');"><img src="./files/images/plus_24.png" style="border-style: none">See More Web Maps from Field Programs</a>';
    }
}
</script>

and then for the actual table that is hidden/shown:

			<div id="tableID1_Div"><a href="#webmaps" onclick="showHide(this,'show');"><img src="./files/images/plus_24.png" style="border-style: none">See More Web Maps from Field Programs</a> (put your mouse over the word &quot;summary&quot; after each map to see more about it)</div>
			<table id="tableID1" style="display:none;" cellspacing="0" border="1">
                <tbody>

etc. etc. etc.


Any tips on what I could be doing wrong?

[Kor]

Standard CSS have other values for tables and tables elements "positive" display, not block. Moz follows the standard CSS, unlike IE.

For a cross-browser compatibility use an empty string as positive display, instead of block.

element.style.display="";

[jaundice]

That worked perfectly, thank you so much! That was driving me crazy...

The new code all in one place in case others are looking for a similar table show/hide function later on:
<script type="text/javascript">
<!-- This function allows the table show/hide function to work -->
function showHide(_myObj,_action) {
var _myTableObj = document.getElementById((_myObj.parentNode.id).substring(0,(_myObj.parentNode.id).indexOf('_')));
if (_action == 'show') {
_myTableObj.style.display = '';
_myObj.parentNode.innerHTML = '<a href="#webmaps" onclick="showHide(this,\'hide\');"><img src="./files/images/minus_24.png" style="border-style: none">Hide Web Maps from Field Programs</a> (put your mouse over the word &quot;summary&quot; after each map to see more about it)';
}
if (_action == 'hide') {
_myTableObj.style.display = 'none';
_myObj.parentNode.innerHTML = '<a href="#webmaps" onclick="showHide(this,\'show\');"><img src="./files/images/plus_24.png" style="border-style: none">See More Web Maps from Field Programs</a>';
}
}
</script>