www.webdeveloper.com
Results 1 to 3 of 3

Thread: table width in firefox not expanding to fill space

Threaded View

  1. #1
    Join Date
    Jan 2011
    Posts
    2

    table width in firefox not expanding to fill space

    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:
    Code:
    <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:
    Code:
    			<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?
    Last edited by Kor; 01-12-2011 at 04:34 AM. Reason: wrap the code [code][/code]

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles