使用Bootstrap表格式化时如何覆盖特定的表边框CSS样式

Question

我正在将Bootstrap与表一起使用，并尝试对默认CSS进行一些小的覆盖，但效果有限。

在下表中，我可以在表头底部（thead）以及页脚中表行的底部（tr in tfoot）添加深色边框，但是我不能在边框上添加边框最后一个表格行的底部（tr：last-child），或者表格主体的底部（tbody），或者我假设表格页脚的顶部（tfoot）。

我在此方面取得的成功有限：

.table-sm.event-table tbody > tr:last-child {
    border-bottom: 2px solid #999;
}

但是，这并不能在所有浏览器中呈现，只能通过将单个像素的浅灰色线设置为2像素的暗线来“起作用”，我不希望这样做，我只希望在最后一行之间有一个像素的暗边框。正文和页脚的第一行（在第二行和总费用之间）。

我知道这与CSS规则的特殊性有关，Bootstrap的规则优先于我自己的规则，但是即使我能够使其他规则发挥作用，我也无法一生都想出如何指定该规则。

 .event-table { width: 100%; } .table thead > tr > th { border-bottom: 1px solid #333; } .table tfoot > tr > td { border-bottom: 1px solid #333; } 

  <table class="table table-bordered table-sm event-table"> <thead> <tr> <th>Unit</th> <th>Total</th> </tr> </thead> <tfoot> <tr> <td>Total Expense $</td> <td class="text-right">$200</td> </tr> <tr> <td>Total Revenue $</td> <td class="text-right">$300</td> </tr> </tfoot> <tbody> <tr> <td>Row One</td> <td>$100</td> </tr> <tr> <td>Row Two</td> <td>$100</td> </tr> </tbody> </table> 

Answer 1

特殊性是游戏的名称，如果您使用Bootstrap，您将很快了解到它变得非常复杂，甚至几乎是不可能的。 虽然使用#ids和!important可能会立即解决您的情况，但即使使用得当，也会在@rse中咬住您。 如果有必要，请尝试仅使用几个#id ，并不惜一切代价避免!important 。

一个更安全的解决方案是对一堂课加倍：

作为（2）的废话特殊情况，当您没有其他要指定的内容时，请复制简单的选择器以增加特异性。

MDN-重要的异常

以下演示具有每个表部分（即<thead> ， <tbody>和<tfoot> ），其最后一行的border-bottom不同。 请注意，bootstrap.css文件也已加载，因此，据我所知和手头所知，它确实可以正常工作。

演示

 .event-table { width: 100%; } .table thead>tr.rowA1.rowA1>th { border-bottom: 1px solid red; } .table tbody>tr.rowB2.rowB2>td { border-bottom: 1px solid lime; } .table tfoot>tr.rowC2.rowC2>td { border-bottom: 1px solid blue; } 

 <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'> <table class="table table-bordered table-sm event-table"> <thead> <tr class='rowA1'> <th>Unit</th> <th>Total</th> </tr> </thead> <tbody> <tr class='rowB1'> <td>Row One</td> <td>$100</td> </tr> <tr class='rowB2'> <td>Row Two</td> <td>$100</td> </tr> </tbody> <tfoot> <tr class='rowC1'> <td>Total Expense $</td> <td>$200</td> </tr> <tr class='rowC2'> <td>Total Revenue $</td> <td>$300</td> </tr> </tfoot> </table> 

Answer 2

给您的标签一个ID而不是一个类。 这样，当您在CSS中使用ID设置特定元素的样式时，它的优先级将高于Bootstrap样式，这将消除大多数情况下对！important的需要。

所以说你像这样在html中的表格标签中添加一个id

<table class="table table-bordered table-sm event-table" id="main-table">

您应该能够成功做到这一点

#main-table {   
  width: 100%; 
} 

#main-table thead > tr > th, #main-table tfoot > tr > td {  
  border-bottom: 1px solid #333; 
}

Answer 3

有时您必须使用!important来覆盖Bootstrap样式，如下所示

border-bottom: 2px solid #999 !important;