Chrome tr rgba border bug

by Carosn Shold

HTML

<p>Both table rows should have a top border of <code>rgba(0,0,0,0.1)</code>. The second row's top border is double that in Chrome and Safari.</p>

<table class="product-table">
  <tbody>
      <tr class="product">

        <td class="product__price">
          <strong>$2,869.99</strong>
        </td>
      </tr>
      <tr class="product">
        <td class="product__description">
          <strong class="product__description__name">Fantastic Rubber Hat</strong>
          <small class="product__description__variant">Plum</small>
        </td>
        <td class="product__price">
          <strong>$4,850.97</strong>
        </td>
      </tr>
  </tbody>
</table>

CSS

table {
    border-collapse: collapse;
    border-spacing: 0;
}

th,
td {
    padding: 15px;
}

tr {
    border-top: 10px solid rgba(0, 0, 0, 0.1);
}