title: CSS: TD background color causing borders to disappear
body: <p>I have a large HTML table that is created dynamically. 
  The table has a standard structure, incl. <code>colgroup</code>, <code>thead</code> and <code>tbody</code> and the below styles. </p>
  
  <p>So far everything works as intended but when I add the class "bgGrey" to the TDs in one column (see below) in order to give the cells in this column a background color (which is only needed on one column) then <strong>all borders of this column disappear in IE11</strong>, except for the left border, and the <strong><code>:hover::before</code> style doesn't work anymore in Chrome</strong> (version 43).<br>
  Without adding the class <code>"bgGrey"</code> I have no issues in both browsers.</p>
  
  <p>It seems that somehow the background color overlaps the border causing this. </p>
  
  <p><strong>My CSS (relevant part):</strong> </p>
  
  <pre class="lang-css prettyprint-override"><code>#myTable, #myTable tbody, #myTable thead, #myTable tr {
      width: 100%;
  }
  #myTable, #myTable th, #myTable td {
      border: 1px solid #000;
      border-collapse: collapse;
      margin: 0;
      padding: 4px;
      position: relative;
  }
  #myTable {
      font-size: 14px;
      table-layout: fixed;
  }
  #myTable th.editable:hover::before, #myTable td.editable:hover::before {
      border: 1px solid blue;
      content: '';
      position: absolute;
      top: 0; right: 0; bottom: 0; left: 0;
      z-index: -1;
  }
  #myTable .th1 {
      padding: 2px;
  }
  #myTable .th2 {
      font-weight: normal;
  }
  
  .bgGrey {
      background-color: #e6e6e6;
  }
  </code></pre>
  
  <p><strong>My HTML (example TR):</strong></p>
  
  <pre><code>&lt;tr&gt;
      // ...
      &lt;td class="editable"&gt;&lt;div contenteditable="true"&gt;&lt;/div&gt;&lt;/td&gt;
      &lt;td class="bgGrey editable txtCenter"&gt;&lt;div contenteditable="true"&gt;&lt;/div&gt;&lt;/td&gt;
      &lt;td class="editable txtRight"&gt;&lt;div contenteditable="true"&gt;&lt;/div&gt;&lt;/td&gt;
      // ...
  &lt;/tr&gt;
  </code></pre>