title: Mozilla border-radius in a table not working consistently
body: <p>Driving myself nuts here!. </p>
  
  <p>Firstly can I just clarify that it is no longer necessary to prefix border radius eg with -moz-. But is it good practice to do so in case an old browser is employed?</p>
  
  <p>Secondly I accept that in employing a border radius inside a table demands that border-collapse is not collapse I also believe that border-spacing should not be 0.</p>
  
  <p>The following draft CSS &amp; HTML creates nicely rounded table elements in all browsers except mozilla where for some reason the table is rounded the th is rounded BUT the td's are all square.</p>
  
  <p>Fire bug reports that the radius is applied. Indeed if I place a background colour on td I can see that this background is rounded. But it still displays the remainder as square.</p>
  
  <p>Any thoughts ???</p>
  
  <pre class="lang-css prettyprint-override"><code>/* borders */
  
  #booking_Form_Wrapper{
      border: 0px;
      padding: 0px;
      margin: 0px;
  }
  
  #booking_Table{
      width: 300px;
      height: 400px;
      background-color: #a5a5a5;
      border-radius: 14px;
      border-spacing: 6px 6px;
  }
  
  #booking_Table th{
      border-radius: 10px;
  }
  
  #booking_Table td{
      border-radius: 10px;
  }
  
  /* other styles */
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;table id="booking_Table"&gt; 
      &lt;thead id="booking_Title"&gt;
          &lt;th&gt;
              Booking
          &lt;/th&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr id="booking_Session"&gt;
              &lt;td&gt;
                  &lt;a&gt;Class - Level&lt;/a&gt;&lt;br /&gt;
                  &lt;a&gt;Day and Date&lt;/a&gt;&lt;br /&gt;
                  &lt;a&gt;Start Time - End Time&lt;/a&gt;
              &lt;/td&gt;                   
          &lt;/tr&gt;
          &lt;tr id="booking_XXXXXXX"&gt;
              &lt;td style="border-radius: 6px;"&gt;
                  &lt;label&gt;Do you want to XXXXXXXX&lt;/label&gt;&lt;input type="checkbox"/&gt;
                  &lt;label&gt;XXX&lt;/label&gt;&lt;input type="radio" name="XXX" value="b"&gt;
                  &lt;label&gt;XXX&lt;/label&gt;&lt;input type="radio" name="XXX" value="s"&gt;
                  &lt;label&gt;XXX&lt;/label&gt;&lt;input type="radio" name="XXX" value="r"&gt;
              &lt;/td&gt;           
          &lt;/tr&gt;
          &lt;tr id="booking_Cancel"&gt;
              &lt;td&gt;                
              &lt;P&gt;&lt;span&gt;Cancellation Policy&lt;/span&gt; - xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&lt;/P&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class="form_Footer"&gt;
              &lt;td&gt;
                  &lt;input class="form_Submit" type="submit" name="submit" value="Make Booking"/&gt;
                  &lt;input class="form_Cancel" type="cancel" name="cancel" value="Cancel"/&gt;
              &lt;/td&gt;
          &lt;/tr&gt; &lt;!-- form footer --&gt;
      &lt;/tbody&gt;
  &lt;/table&gt; &lt;!-- booking table --&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/MEymY.jpg" alt="enter image description here"></p>
  
  <p>Here is the firebug computed style info for the first square td</p>
  
  <p><img src="https://i.stack.imgur.com/0wJJD.jpg" alt="enter image description here"></p>