Question

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

在下表中，我能够在桌面底部（thead）添加一个黑色边框，并在页脚的底部添加一个黑色边框（tr in trfoot），但我不能在最后一个表行（tr：last-child）的底部添加一个边框，或者在表体（tbody）的底部添加一个边框，或者我想是表格页脚的顶部（tfoot）。

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

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

但是，这并不能在所有浏览器中呈现，只有＆＃39;才能正常运行。通过使单像素浅灰色线成为2像素暗线，我不想要，我只想在主体的最后一行和页脚的第一行之间（在第二行和第二行之间）有一个像素的黑色边框总费用。

我知道这与CSS规则的特殊性有关，而Bootstrap的规则先于我自己的规则，但即使我能够使其他规则有效，我也无法为我的生活做准备弄清楚如何指定这一个。

＆＃13;

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

＆＃13;

    <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>

＆＃13;

Answer 1

Specificity是游戏的名称，如果你处理Bootstrap，你会很快发现它变得非常复杂甚至几乎不可能。虽然使用#ids和!important可能会立即对您的情况做出补救，但即使只是适度使用它们，它也会在@rse中使用它。如果必须，请尝试使用少数#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样式具有更高的优先级，这将消除对大多数情况下重要的需求

所以说你在html中为你的table标签添加一个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;

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

3 个答案:

演示