title: CSS border-collapse not working in <table>
body: <p>I'm having an impossible time getting <code>border-collapse</code> to work for me. The page I'm working with has a table in it. The table has 2 columns, one for a label and the other for data. Sometimes there is no data to display, but I still need to rendor the table row and label column because I have a JQuery script that might need to write data to the data column. In other words, regardless of whether there is data or not, I need to rendor the table row as a placeholder. If there is no data I want the row to collapse.</p>
  
  <p>In the html below, <code>visibility:hidden</code> is working since I won't see the label 'Condition:', but the row doesn't collapse. I've tried looking at it in FireFox 13, Safari 5 and IE 8. All three show the same problem - the row never ccollapses even though it doesn't display anything. </p>
  
  <pre><code>#data
  {
      font-size: 95%;
  }
  #data table
  {
      border-collapse: collapse;
      margin-top: 15px;
      margin-bottom: 15px;
  }
  #data table td
  {
      padding-left: 5px;
  }
  
  
  &lt;div id="data"&gt;
  
  ....
  
      &lt;table&gt;
          &lt;tr style="visibility:hidden;"&gt;
              &lt;td&gt;&lt;div class="datalabel"&gt;Condition:&lt;/div&gt;&lt;/td&gt;
              &lt;td class="datainfo"&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  
  ....
  
  &lt;/div&gt;
  </code></pre>
  
  <p>What more do I need to do to make this happen? I'd like it to be cross-browser compatible. I'm trying to support IE7 and above. I'm guessing someone is going to give me hell for using a table in the first place... ;)</p>