Member Avatar for Lucrezia

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 :$

the_problem.gif 0.81 KB
  • 7 Contributors
  • 9 Replies
  • 2K Views
  • 5 Years Discussion Span
  • Latest Post Latest Post by EricGeerts
Member Avatar for ~s.o.s~

> 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>
Member Avatar for Lucrezia

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:

Member Avatar for MidiMagic

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

Member Avatar for Lucrezia

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!

Member Avatar for ~s.o.s~

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.

Member Avatar for emmanueloladele

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>
Member Avatar for praveen64

The solution helped! Thanks!.

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

Member Avatar for Johnsoncom

How to display the blocked images in javascript

Member Avatar for EricGeerts

If you don't know how to set the default display method, you could use a class instead.

.hide {
    display: none;
}

and

table.className = "hide";
table.className = "";

(or use other manners for changing the className).

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.