How to remove child's border around parent?-CodePudding

If make table with 9 tds, add borders, how to remove border around parent?

table tr {
  border: none !important;
}

<table border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <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>

CodePudding user response：

.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  border="1" cellspacing="0" cellpadding="10">
  <tbody>
    <tr>
      <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>

CodePudding user response：

You Can Use Border-collapse Border Collapse

table,
tr,
th {
  border-collapse: collapse;
}

td {
  width: 200px;
  height: 200px;
  border: 2px solid red;
}

<table border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <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>