title: CSS display:inline/none with tables works with Firefox but not Chrome or Safari
body: <p>I am working on a quick and dirty application which involves several single-column tables displayed horizontally within an outer table. </p>
  
  <pre><code>|-------------------------------------------|
  |             outer table                   |
  |-------------------------------------------|
  |    ---------    ---------    ---------    |
  |    | table 1|   |table 2|    |table 3|    |
  |    ---------    ---------    ---------    |
  |    | row 1  |   | row 1 |    | row 1 |    |
  |    ---------    ---------    ---------    |
  |    ...                                    |
  |    ---------    ---------    ---------    |
  |    | row n  |   | row n |    | row n |    |
  |    ---------    ---------    ---------    |
  |                                           |
  |-------------------------------------------|
  
          ---------    ---------    
          |SHOW #2|    |SHOW #3|
          ---------    ---------    
  </code></pre>
  
  <p>I realize this could be done using css without tables, but I am not adept enough and this doesn't need to be elegant. At the start, only the first table is displayed.  Clicking buttons toggles the display from "none" to "inline" (I also tried "block") of #2 and #3.  In this example, I set the style of #2 in a DIV around the table and in #3 within a TD around the table.  Both methods work in Firefox 22.0 but not in Chrome 27.0 or Safari 5.0 (all on Mac).  Is there any solution using tables?  Or, if you'd like to design the style sheet, that works too :-)</p>
  
  <pre><code>&lt;html&gt;
  &lt;body&gt;
  
  &lt;table id = "main" border=0 cellspacing=20&gt;
  
      &lt;tr&gt;
          &lt;td&gt;
              &lt;table id = "tbl1" border=0&gt; 
                  &lt;tr&gt;&lt;td&gt; table #1, row #1 &lt;/td&gt;&lt;/tr&gt;
                  &lt;tr&gt;&lt;td&gt; table #1, row #2 &lt;/td&gt;&lt;/tr&gt;
              &lt;/table&gt;
          &lt;/td&gt;
  
          &lt;td&gt;
              &lt;!-- Hide the table with a hidden DIV --&gt;
  
              &lt;div id = "tbl2" style="display:none"&gt;
                &lt;table border=0&gt;
                  &lt;tr&gt;&lt;td&gt; table #2, row #1 &lt;/td&gt;&lt;/tr&gt;
                  &lt;tr&gt;&lt;td&gt; table #2, row #2 &lt;/td&gt;&lt;/tr&gt;
              &lt;/table&gt;
             &lt;/div&gt;
         &lt;/td&gt;
  
         &lt;!-- Hide the table with a hidden TD --&gt;
  
         &lt;td id = "tbl3" style="display:none"&gt;
            &lt;table border=0&gt;
              &lt;tr&gt;&lt;td&gt; table #3, row #1 &lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt; table #3, row #2 &lt;/td&gt;&lt;/tr&gt;
          &lt;/table&gt;
        &lt;/td&gt;
     &lt;/tr&gt;
  &lt;/table&gt; 
  
  &lt;br&gt;
  
  &lt;input type=button value ='show table #2' onclick='document.getElementById("tbl2").style="display:inline"'&gt;
  &lt;input type=button value ='show table #3' onclick='document.getElementById("tbl3").style="display:inline"'&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;input type=button value ='hide table #2' onclick='document.getElementById("tbl2").style="display:none"'&gt;
  &lt;input type=button value ='hide table #3' onclick='document.getElementById("tbl3").style="display:none"'&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>