display:block to show a table?

Hello, and congratulations for this beautiful and meticulous forum.

I have a javascript/html/css issue that I'm trying to solve for about 3 days now, with no luck.
I'm using javascript to toggle the visibility of a certain table. I set the table's display property to none (via js) in order to hide it and to block in order to show it.
However, applying block in the display property of a table seems to be having trouble with firefox.

See below what display:block does to a table in firefox:
This simple html code:

<table style="display:block" border="1" width="100%">
<tr><td width="100%">test</td></tr></table>

produces this result in firefox:

Notice how the td has the size of the content and does not stretch to the size of the table (although it has a width="100%")? In IE it works fine btw.

If I change my js code to apply "table" to the display property of the table in order to show it, it doesn't show up at all in IE!

Any ideas?
Thanks in advance.

PS: Sorry for any mistakes, my native language is not english :$

Attachments

Lucrezia

Newbie Poster

18 posts since Jul 2007

Reputation Points: 10

Solved Threads: 0

4 Years Ago

> Hello, and congratulations for this beautiful and meticulous forum.
Hello and welcome. :-)

Now to your problem. 'display' property of CSS decides how an element would be displayed. Since you already have a table, it doesn't make sense to set the display property to table.

Normally this property is used to alter the way a paragraph, a div block or a span block i.e. any container tag displays the data. So what to do when the tag under consideration is a 'table' tag? Simple, set its property to nothing.

<table id="tab" border="1" width="100%">
  <tr>
    <td width="100%">test</td>
  </tr>
</table>

and when making it hidden do something like:

<html>
<head>
    <script type="text/javascript">
    function hide(id)
    {
        document.getElementById(id).style.display = 'none';
    }
    function show(id)
    {
        document.getElementById(id).style.display = '';
    }
    </script>    
</head>
<body onmousedown="hide('tab');" onmouseup="show('tab');">
<table id="tab" border="1" width="100%">
    <tr>
        <td>test</td>
    </tr>
</table>
</body>
</html>

~s.o.s~

Failure as a human

Administrator

11,938 posts since Jun 2006

Reputation Points: 3,281

Solved Threads: 734

4 Years Ago

Thanks for your reply.
Setting the display property to nothing was the first thing I tried, before I even tried block. Mysteriously enough, it didn't work neither in IE nor in any other browser! And that's quite weird because I remember using the exact same techinique in another site I was developing about a year ago... :icon_confused:

Lucrezia

Newbie Poster

18 posts since Jul 2007

Reputation Points: 10

Solved Threads: 0

4 Years Ago

Use the visibility property. There are three selections: visible, hidden, and collapse. Visibility is also a recognized style method.

MidiMagic

Nearly a Senior Poster

3,319 posts since Jan 2007

Reputation Points: 730

Solved Threads: 182

4 Years Ago

Use the visibility property. There are three selections: visible, hidden, and collapse. Visibility is also a recognized style method.

That would be a nice solution!
Does this property work cross-browser?
Thanks!

Lucrezia

Newbie Poster

18 posts since Jul 2007

Reputation Points: 10

Solved Threads: 0

4 Years Ago

Yes, the visibility property works cross browser. But the catch here is that when the visibility is set to 'hidden', the element is still present there and still contributes to the layout of the page, it just isn't visible.

On the other hand, setting the display property to nothing('') will remove the element and effect the layout of the page since the element is physically not there (though I guess it exists in the DOM since we can always make it come back).

Choose the method which suits you the most in the given scenario keeping the above things in mind. Here is an interesting read.

~s.o.s~

Failure as a human

Administrator

11,938 posts since Jun 2006

Reputation Points: 3,281

Solved Threads: 734

4 Years Ago

put your table in a div and apply the display property to the div as below

<html>
  
      <head>
   
      <script type="text/javascript">
  
      function hide(id)
   
      {
  
      document.getElementById("myTable").style.display = 'none';
  
      }
   
      function show(id)
   
      {
  
      document.getElementById("myTable").style.display = 'block';
 
      }
 
      </script>
 
      </head>

      <body onmousedown="hide('tab');" onmouseup="show('tab');">
 
 <div id="myTable" >
      <table id="tab" border="1" width="100%">

      <tr>

      <td>test</td>
 
      </tr>
  
      </table>

</div>

      </body>

      </html>

emmanueloladele

Newbie Poster

15 posts since Nov 2007

Reputation Points: 10

Solved Threads: 1

2 Years Ago

The solution helped! Thanks!.

Using display='' instead of display='block' while trying to make a table visible from javascript worked.

praveen64

Newbie Poster

1 post since Jul 2009

Reputation Points: 10