如何在bootstrap 3.0中删除<td>边框？

Question

我需要帮助，我的css覆盖我的表格边框似乎不工作。我正在尝试创建一个类似于以下内容的表：

<table class="table table-bordered">
    <tbody>
        <tr>
            <td>Collection 1</td>
            <td>5</td>
        </tr>
        <tr>
            <td>Collection 2</td>
            <td>5</td>
        </tr>
        <tr>
            <td colspan="2" class="no-line">-----------</td>
        </tr>
        <tr>
            <td>Total </td>
            <td>10</td>
        </tr>
    </tbody>
</table>

在css中，我尝试了所有可能的组合，只是为了检查哪种组合可以工作，但仍然不能删除边框。

.table-bordered > tbody > tr > td.no-line {
border:none !important;
border-right: none !important;
border-left: none !important;
border-top: none !important;
border-right-style: none !important;
border-left-style: none !important;
}

请帮忙，非常感谢！:)

Answer 1

这实际上是在移除边界。您仍然可以看到的边框是表格边框。Check this fiddle with your original code

一旦删除了表格边框

.table-bordered{
  border:none;
}

边界将会消失。Check this fiddle

Answer 2

如果您使用的是bootstrap，则无需创建自定义css或使用CDN修改现有css

​

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
      integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<table class="table table-bordered">
  <tbody>
    <tr>
        <td>Collection 1</td>
        <td>5</td>
    </tr>
    <tr>
        <td>Collection 2</td>
        <td>5</td>
    </tr>
    <tr>
        <td colspan="2" class="no-line">-----------</td>
    </tr>
    <tr>
        <td>Total </td>
        <td>10</td>
    </tr>
  </tbody>
</table>

​

Answer 3

对于特定的删除边框

<table class="table table-bordered">
    <tbody>
        <tr>
            <td >Collection 1</td>
            <td>5</td>
        </tr>
        <tr>
            <td class="noborder">Collection 2</td>
            <td>5</td>
        </tr>
        <tr>
            <td colspan="2" class="no-line">-----------</td>
        </tr>
        <tr>
            <td>Total </td>
            <td>10</td>
        </tr>
    </tbody>
</table>


<style>

.noborder{
      border: none!important;
}
</style>