display:block to show a table?

•

What is DaniWeb IT Discussion Community?

You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 425,816 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,081 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting

Thread Tools Display Modes

Views: 3967 | Replies: 6

•

Join Date: Jul 2007

Location: Greece

Posts: 14

Reputation: Lucrezia is an unknown quantity at this point

Rep Power: 2

Solved Threads: 0

Lucrezia

Offline

Newbie Poster

display:block to show a table?

Jul 5th, 2007

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:

Help with Code Tags

(Toggle Plain Text)

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

produces this result in firefox:
the_problem.gif
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

•

Join Date: Jun 2006

Location: India

Posts: 6,855

Reputation: ~s.o.s~ is a splendid one to behold

Rep Power: 23

Solved Threads: 344

~s.o.s~

Offline

Lazy, Useless & Apathetic

Re: display:block to show a table?

Jul 6th, 2007

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

 Help with Code Tags 
 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:

 Help with Code Tags 
 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>

I don't accept change. I don't deserve to live.

Happiness corrupts people.

Failing to value the lives of others cheapens your own.

•

Join Date: Jul 2007

Location: Greece

Posts: 14

Reputation: Lucrezia is an unknown quantity at this point

Rep Power: 2

Solved Threads: 0

Lucrezia

Offline

Newbie Poster

Re: display:block to show a table?

Jul 6th, 2007

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

•

Join Date: Jan 2007

Posts: 2,556

Reputation: MidiMagic is on a distinguished road

Rep Power: 7

Solved Threads: 115

MidiMagic

Offline

Posting Maven

Re: display:block to show a table?

Jul 13th, 2007

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

Daylight-saving time uses more gasoline

•

Join Date: Jul 2007

Location: Greece

Posts: 14

Reputation: Lucrezia is an unknown quantity at this point

Rep Power: 2

Solved Threads: 0

Lucrezia

Offline

Newbie Poster

Re: display:block to show a table?

Jul 13th, 2007

•

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!

•

Join Date: Jun 2006

Location: India

Posts: 6,855

Reputation: ~s.o.s~ is a splendid one to behold

Rep Power: 23

Solved Threads: 344

~s.o.s~

Offline

Lazy, Useless & Apathetic

Re: display:block to show a table?

Jul 14th, 2007

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.

I don't accept change. I don't deserve to live.

Happiness corrupts people.

Failing to value the lives of others cheapens your own.

•

Join Date: Nov 2007

Posts: 15

Reputation: emmanueloladele is an unknown quantity at this point

Rep Power: 1

Solved Threads: 0

emmanueloladele emmanueloladele is offline

Offline

Newbie Poster

Re: display:block to show a table?

May 27th, 2008

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

 Help with Code Tags 
 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>