title: Why do the CSS property border-collapse and empty-cells conflict?
body: <p>I can use the CSS property <code>border-collapse</code> to combine the borders of adjacent table cells. And I can use <code>empty-cells</code> to hide table cells that have no content. But when I use both, the <code>empty-cells</code> property has no effect and empty cells are always visible. At least there's a border around each of them, even where multiple adjacent rows and columns are empty.</p>
  
  <p>Here's an example:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  table
  {
      border-collapse: collapse;
      border-spacing: 0;
  }
  th,
  td
  {
      empty-cells: hide;
      border: solid 1px black;
      padding: 2px 4px;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;table&gt;
  &lt;tr&gt;
      &lt;th&gt;&lt;/th&gt;
      &lt;th&gt;&lt;/th&gt;
      &lt;th&gt;Header 3&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;th&gt;&lt;/th&gt;
      &lt;th&gt;&lt;/th&gt;
      &lt;th&gt;Header 3&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td&gt;Cell 1&lt;/td&gt;
      &lt;td&gt;Cell 2&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td&gt;Cell 1&lt;/td&gt;
      &lt;td&gt;Cell 2&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>