使用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;