display:block to show a table?

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Thread Solved

•
•
Join Date: Jul 2007
Posts: 18
Reputation: Lucrezia is an unknown quantity at this point 
Solved Threads: 0
Lucrezia Lucrezia is offline Offline
Newbie Poster

display:block to show a table?

 
0
  #1
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:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <table style="display:block" border="1" width="100%">
  2. <tr><td width="100%">test</td></tr></table>
produces this result in firefox:
Click image for larger version Name: the_problem.gif Views: 8 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
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2006
Posts: 7,649
Reputation: ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of 
Solved Threads: 474
Super Moderator
Featured Poster
~s.o.s~'s Avatar
~s.o.s~ ~s.o.s~ is offline Offline
Failure as a human

Re: display:block to show a table?

 
0
  #2
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.
html Syntax (Toggle Plain Text) 
  1. <table id="tab" border="1" width="100%">
  2.   <tr>
  3.     <td width="100%">test</td>
  4.   </tr>
  5. </table>

and when making it hidden do something like:

html Syntax (Toggle Plain Text) 
  1. <html>
  2. <head>
  3.     <script type="text/javascript">
  4.     function hide(id)
  5.     {
  6.         document.getElementById(id).style.display = 'none';
  7.     }
  8.     function show(id)
  9.     {
  10.         document.getElementById(id).style.display = '';
  11.     }
  12.     </script>    
  13. </head>
  14. <body onmousedown="hide('tab');" onmouseup="show('tab');">
  15. <table id="tab" border="1" width="100%">
  16.     <tr>
  17.         <td>test</td>
  18.     </tr>
  19. </table>
  20. </body>
  21. </html>
I don't accept change; I don't deserve to live.

Jo Tujhe Jagaaye, Nindein Teri Udaaye Khwaab Hai Sachcha Wahi.
Nindon Mein Jo Aaye Jise To Bhul Jaaye Khawab Woh Sachcha Nahi.
Khwaab Ko Raag De, Nind Ko Aag De
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2007
Posts: 18
Reputation: Lucrezia is an unknown quantity at this point 
Solved Threads: 0
Lucrezia Lucrezia is offline Offline
Newbie Poster

Re: display:block to show a table?

 
0
  #3
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...
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2007
Posts: 3,210
Reputation: MidiMagic has a spectacular aura about MidiMagic has a spectacular aura about 
Solved Threads: 166
MidiMagic's Avatar
MidiMagic MidiMagic is offline Offline
Nearly a Senior Poster

Re: display:block to show a table?

 
0
  #4
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
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2007
Posts: 18
Reputation: Lucrezia is an unknown quantity at this point 
Solved Threads: 0
Lucrezia Lucrezia is offline Offline
Newbie Poster

Re: display:block to show a table?

 
0
  #5
Jul 13th, 2007
•
•
•
•
Originally Posted by MidiMagic View Post
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!
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2006
Posts: 7,649
Reputation: ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of 
Solved Threads: 474
Super Moderator
Featured Poster
~s.o.s~'s Avatar
~s.o.s~ ~s.o.s~ is offline Offline
Failure as a human

Re: display:block to show a table?

 
0
  #6
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.

Jo Tujhe Jagaaye, Nindein Teri Udaaye Khwaab Hai Sachcha Wahi.
Nindon Mein Jo Aaye Jise To Bhul Jaaye Khawab Woh Sachcha Nahi.
Khwaab Ko Raag De, Nind Ko Aag De
Reply With Quote Quick reply to this message  
•
•
Join Date: Nov 2007
Posts: 15
Reputation: emmanueloladele is an unknown quantity at this point 
Solved Threads: 1
emmanueloladele emmanueloladele is offline Offline
Newbie Poster

Re: display:block to show a table?

 
0
  #7
May 27th, 2008
put your table in a div and apply the display property to the div as below



html Syntax (Toggle Plain Text) 
  1.      <html>
  2.  
  3.       <head>
  4.  
  5.       <script type="text/javascript">
  6.  
  7.       function hide(id)
  8.  
  9.       {
  10.  
  11.       document.getElementById("myTable").style.display = 'none';
  12.  
  13.       }
  14.  
  15.       function show(id)
  16.  
  17.       {
  18.  
  19.       document.getElementById("myTable").style.display = 'block';
  20.  
  21.       }
  22.  
  23.       </script>
  24.  
  25.       </head>
  26.  
  27.       <body onmousedown="hide('tab');" onmouseup="show('tab');">
  28.  
  29.  <div id="myTable" >
  30.       <table id="tab" border="1" width="100%">
  31.  
  32.       <tr>
  33.  
  34.       <td>test</td>
  35.  
  36.       </tr>
  37.  
  38.       </table>
  39.  
  40. </div>
  41.  
  42.       </body>
  43.  
  44.       </html>
Last edited by peter_budo; May 29th, 2008 at 7:58 pm. Reason: Keep It Organized - please use [code] tags
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2009
Posts: 1
Reputation: praveen64 is an unknown quantity at this point 
Solved Threads: 1
praveen64 praveen64 is offline Offline
Newbie Poster

Re: display:block to show a table?

 
0
  #8
Jul 23rd, 2009
The solution helped! Thanks!.

Using display='' instead of display='block' while trying to make a table visible from javascript worked.
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread has been marked solved.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum


Views: 8672 | Replies: 7
Thread Tools Search this Thread



Tag cloud for JavaScript / DHTML / AJAX
acid2 ajax ajaxexample ajaxjspservlets array autoplay blackjack browser captcha captchaformproblem cart child close codes date debugger decimal dependent developer disablefirebug dom element embed engine enter events ext file firefox flash focus form forms frameworks game gears getselection google gxt hiddenvalue highlightedword hint html ie7 ie8 iframe index java javascript javascripthelp2020 javascripts jquery jsp jump libcurl listbox maps marquee masterpage math media menu mp4 onerror onmouseoutdivproblem onmouseover onreadystatechange paypal pdf php player position post programming prototype rated redirect safari scale scriptlets scroll search security size software solutions sources star starrating stretch synchronous toggle tweet unicode variables web webkit webservice window \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC