Question

我有一个简单的表格，带有引导程序，有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信息和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>

Answer 2

Css =层叠样式表，如果你加载

th:last-child, td:last-child {
    border-left: none !important;
}

在Twitter引导程序之前，它会被覆盖，除非它的'！important' 尝试在引导程序加载后加载你的样式，它不应该被覆盖 - 不再需要！重要！

你唯一的其他选择是内联css吗？

Answer 3

将信息放在同一个单元格中，您可以使用

<tr>
    <th>Data</th>
    <th>Value | Edit</th>

</tr>
<tr>
    <td>data</td>
    <td width="70px">
        <span style="float:left;width:50%;">this is the left</span>
        <span style="float:right;width:50%:">this is right</span>
    </td>
</tr>

您可以在第一个span元素中使用bootstrap .text-center类来对齐中间的文本。希望它有所帮助。

在最后一个单元格之前删

3 个答案: