如何在使用 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

Specificity 是游戏的名称，如果您使用 Bootstrap，您会很快发现它变得非常复杂，甚至几乎是不可能的。虽然使用#ids 和!important 可能是对您的情况的直接补救措施，但如果使用它们，即使只是适度使用它们也会让您陷入困境。如果必须，请尝试仅使用几个#id，并不惜一切代价避免使用!important。

一个更安全的解决方案是在一个类上加倍：

作为 (2) 的一个无意义的特例，当您没有更多要指定的内容时，复制简单的选择器以增加特异性。

MDN - The !important exception

以下演示具有每个表格部分（即<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;