如何用其他边框类覆盖边框类？

Question

我正在尝试弄清楚如何覆盖我添加到表格中的一些表格边框类。

我为表格边框创建了 5 个类，并添加了边框折叠。在第一行中，我希望第一个单元格没有边框，第二个和第三个单元格仅具有某些边框，以便它们显示为一个单元格。我可以向 none 类添加 !important，但我们假设我不能，并且还假设我无法添加任何内联样式。虽然我不想这样做，但我什至尝试添加一些类，如

td.TBL {border-style:solid none solid solid;}

并将

class="T B L"

更改为

class="TBL"

但这也不起作用。所以我在 none 类中遇到的问题是相似的。

为了实现这一目标，我还有哪些其他选择？

table {
  border-collapse: collapse;
}

.T>tbody>tr>td,
td.T {
  border-top-style: solid;
}

.R>tbody>tr>td,
td.R {
  border-right-style: solid;
}

.B>tbody>tr>td,
td.B {
  border-bottom-style: solid;
}

.L>tbody>tr>td,
td.L {
  border-left-style: solid;
}

td.none {
  border-style: none;
}

<table class="T R B L">
  <tr>
    <td class="none">
      1
    </td>
    <td class="T B L">
      2
    </td>
    <td class="T R B">
      3
    </td>
  </tr>

  <tr>
    <td>
      4
    </td>
    <td>
      5
    </td>
    <td>
      6
    </td>
  </tr>
</table>

Answer 1

你把事情搞得太复杂了。

首先，保留所有边框，然后仅删除必要的边框。

例如：

table {
  border-collapse: collapse;
}

td {
  border: 2px solid grey;
}

.R {
  border-right: none;
}

.L {
  border-left: none;
}

<table class="">
  <tr>
    <td class="R">
      1
    </td>
    <td class="L R">
      2
    </td>
    <td class="L">
      3
    </td>
  </tr>

  <tr>
    <td>
      4
    </td>
    <td>
      5
    </td>
    <td>
      6
    </td>
  </tr>
</table>