css - 删除最后一个单元格之前的边框

Question

我有一个简单的表格，使用 bootstrap 设计，有 3 列和几行(动态添加来自服务器的数据)。

<table class="table table-bordered">
    <tr>
        <th>Data</th>
        <th>Value</th>
        <th><!-- Should be 'Edit' but I'm hiding it--></th>
    </tr>
    <tr>
        <td>data</td>
        <td>value</td>
        <td width="70px"><a href="/link/to/edit/value">Edit</a></td>
    </tr>
</table>

我想删除列 Value 和 Edit 之间的边框，使其看起来像是一列。

这是我试过的:

<style>
    th:last-child, td:last-child {
        border-left: none !important;
    }
    th:nth-last-child(2), td:nth-last-child(2) {
        border-right:none !important;
    }
</style>

它确实有效，但我不想使用 !important 参数。

有没有办法不用 !important 来做到这一点，或者像这样将两种信息放在同一个单元格中的另一种方法:Value info in the middle of the cell , 和右边的 Edit 信息 ?

---

编辑
谢谢Aaron给我 without !important way这是:

<style>
    body table.table.table-bordered tr th:last-child,
    body table.table.table-bordered tr td:last-child {
        border-left: none;
    }

    body table.table.table-bordered tr th:nth-last-child(2),
    body table.table.table-bordered tr td:nth-last-child(2) {
        border-right: none;
    }
</style>

即使它运行良好，我也确信有更好的方法来实现它，比如 inline 方式。有什么想法吗？

Answer 1

要制作样式集，您可以通过使用类和标签来提高标签的特异性。

所以你的风格会变成这样:

<style>
    body table.table.table-bordered tr th:last-child, td:last-child {
        border-left: none;
    }
    body table.table.table-bordered tr th:nth-last-child(2), 
    body table.table.table-bordered tr td:nth-last-child(2) {
        border-right:none;
    }
</style>