css - 删除单元格内的表格边框

Question

我在另一个表中有这个表，我想从子表的单元格中删除边框(A 和 B 周围)。下面是源代码。

    <style>
    .withBorders tr td{
       border: 1px solid black !important ;
    }
    .withBorders table.withoutBorders tr td {
       border:0px
    }
    </style>

    <table class="withBorders">
      <tr>
        <td>
          <table class="withoutBorders">
            <tbody>
              <tr>
                <td>A</td>
                <td>B</td>
              </tr>
            </tbody>
          </table>
        </td>
        <td>C</td>
      </tr>
      <tr>
        <td>D</td>
        <td>E</td>
      </tr>
    </table>

问题是这不起作用，我已经尝试对子表的 css 选择器进行许多更改，但我无法覆盖父表的 css 属性。

有人可以就此提出建议吗？注意:我无法对父表的 css 选择器进行任何更改。

Answer 1

    .withBorders tr td{
       border: 1px solid black;
    }
    .withBorders tr td table tr td {
       border:none;
    }

    <table class="withBorders">
      <tr>
        <td>
          <table class="withoutBorders">
            <tbody>
              <tr>
                <td>A</td>
                <td>B</td>
              </tr>
            </tbody>
          </table>
        </td>
        <td>C</td>
      </tr>
      <tr>
        <td>D</td>
        <td>E</td>
      </tr>
    </table>

1. 重复你输入的内容，不要像这样改变你的输入

.withBorders table.withoutBorders tr td {
   border:0px
}

1. 避免在您的 CSS 中使用 !important。这不好。