How to remove child's border around parent?

table tr {
  border: none !important;
}

<table border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td class="td"></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

.border-none {
  border-collapse: collapse;
  border: none;
}

.border-none td {
  border: 1px solid black;
}

.border-none tr:first-child td {
  border-top: none;
}

.border-none tr:last-child td {
  border-bottom: none;
}

.border-none tr td:first-child {
  border-left: none;
}

.border-none tr td:last-child {
  border-right: none;
}

<table class="border-none" border="1" cellspacing="0" cellpadding="10">
  <tbody>
    <tr>
      <td class="td"></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>