title: Unwanted borders in tables
body: <p>I have a borderless table, I want alternate rows to have a background color. I set CSS background-color on the tr element, it gives all the cells in the row the color I want but there is a thin white line between each of them. How can I get rid of this?</p>
  <p>Following is very simple demo of the phenomenon. Note the unwanted thin white line between the cells on row 2. Adding border, border-spacing, or border-collapse properties seems to make no difference. I've tried this on Firefox and Chrome, both behave the same.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Test&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;style&gt;
      td {
        padding: 5px;
      }
    &lt;/style&gt;
    &lt;table style="width:100%"&gt;
      &lt;colgroup&gt;
        &lt;col style="width:135px"&gt;
        &lt;col style="width:135px"&gt;
        &lt;col&gt;
      &lt;/colgroup&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td&gt;Text&lt;/td&gt;
          &lt;td&gt;Text&lt;/td&gt;
          &lt;td&gt;Text&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr style="background-color:#87CEEB"&gt;
          &lt;td&gt;Text&lt;/td&gt;
          &lt;td&gt;Text&lt;/td&gt;
          &lt;td&gt;Text&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;Text&lt;/td&gt;
          &lt;td&gt;Text&lt;/td&gt;
          &lt;td&gt;Text&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>