Ad:

JavaScript / DHTML / AJAX Discussion Thread
Marked Solved
Views: 20987

Jul 5th, 2007

display:block to show a table?

Expand Post »

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:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<table style="display:block" border="1" width="100%">
<tr><td width="100%">test</td></tr></table>
<table style="display:block" border="1" width="100%">
<tr><td width="100%">test</td></tr></table>

produces this result in firefox:

Click image for larger version

Name: the_problem.gif
Views: 611
Size: 829 Bytes
ID: 3713

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

Similar Threads

createElement wont show table/div in JavaScript / DHTML / AJAX
Mouse Over ToolTip Help in JavaScript / DHTML / AJAX
move up n down in C++
CSS Div's For Myspace in HTML and CSS

Lucrezia

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

18 posts
since Jul 2007

Permalink

Jul 6th, 2007

Re: display:block to show a table?

> 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.

html Syntax (Toggle Plain Text)
<table id="tab" border="1" width="100%">
  <tr>
    <td width="100%">test</td>
  </tr>
</table>
<table id="tab" border="1" width="100%">
  <tr>
    <td width="100%">test</td>
  </tr>
</table>

and when making it hidden do something like:

html Syntax (Toggle Plain Text)
<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>
<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~

Super Moderator

Featured Poster

Reputation Points: 3233

Solved Threads: 720

Failure as a human

Offline

8,872 posts
since Jun 2006

Permalink

Jul 6th, 2007

Re: display:block to show a table?

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...

Lucrezia

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

18 posts
since Jul 2007

Permalink

Jul 13th, 2007

Re: display:block to show a table?

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

MidiMagic

Reputation Points: 730

Solved Threads: 181

Nearly a Senior Poster

Offline

3,314 posts
since Jan 2007

Permalink

Jul 13th, 2007

Re: display:block to show a table?

Click to Expand / Collapse Quote originally posted by MidiMagic ...

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

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

18 posts
since Jul 2007

Permalink

Jul 14th, 2007

Re: display:block to show a table?

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~

Super Moderator

Featured Poster

Reputation Points: 3233

Solved Threads: 720

Failure as a human

Offline

8,872 posts
since Jun 2006

Permalink

May 27th, 2008

Re: display:block to show a table?

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

html Syntax (Toggle Plain Text)
     <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>
     <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>

Last edited by peter_budo; May 29th, 2008 at 7:58 pm. Reason: Keep It Organized - please use [code] tags

emmanueloladele

Reputation Points: 10

Solved Threads: 1

Newbie Poster

Offline

15 posts
since Nov 2007

Permalink

Jul 23rd, 2009

Re: display:block to show a table?

The solution helped! Thanks!.

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

praveen64

Reputation Points: 10

Solved Threads: 1

Newbie Poster

Offline

1 posts
since Jul 2009

Permalink

May 23rd, 2011

Javascirpt

How to display the blocked images in javascript

Johnsoncom

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

1 posts
since May 2011

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Passing Multiple Variables In AJAX

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: IE Problem? (AJAX, PHP, javascript )

DaniWeb Message

Cancel Changes

User Name
Password