title: Removing unwanted table cell borders with CSS
body: <p>I have a peculiar and frustrating problem. For the simple markup:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;table&gt;
      &lt;thead&gt;
          &lt;tr&gt;&lt;th&gt;1&lt;/th&gt;&lt;th&gt;2&lt;/th&gt;&lt;th&gt;3&lt;/th&gt;&lt;/tr&gt;
       &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;&lt;td&gt;a&lt;/td&gt;&lt;td&gt;b&gt;&lt;/td&gt;&lt;td&gt;c&lt;/td&gt;&lt;/tr&gt;
          &lt;tr class='odd'&gt;&lt;td&gt;x&lt;/td&gt;&lt;td&gt;y&lt;/td&gt;&lt;td&gt;z&lt;/td&gt;&lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I apply different background-color values to the <em>thead</em>, <em>tr</em>, and <em>tr</em> odd elements. The problem is that in most browsers, every cell has an unwanted border which is not the color of any of the table rows. Only in Firefox 3.5 does the table have no borders in any cell. </p>
  
  <p>I'd just like to know how to remove these borders in the other major browsers so that the only thing you see in the table are the alternating row colors.</p>