www.webdeveloper.com
Results 1 to 3 of 3

Thread: table width in firefox not expanding to fill space

  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 03:34 AM. Reason: wrap the code [code][/code]

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    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.
    Code:
    element.style.display="";

  3. #3
    Join Date
    Jan 2011
    Posts
    2

    Smile

    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>

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