How to override a specific table border CSS style while using Bootstrap table formatting

Question

I'm using Bootstrap with tables, and trying to make some minor overrides to the default CSS with limited success.

In the table below, I'm able to add a dark border at the bottom of the table head (thead), and to the bottom of the table rows in the footer (tr in tfoot), but I cannot add a border to the bottom of the last table row (tr:last-child), or alternately the bottom of the table body (tbody), or I suppose the top of the table footer (tfoot).

I've had limited success with this:

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

However this doesn't render in all browsers, and only 'works' by making the single pixel light grey line a 2 pixel dark line, which I don't want, I just want a single pixel dark border between the last row of the body and the first row of the footer (between Row Two and Total Expense).

I know this has to do with the specificity of the CSS rules, and Bootstrap's rule taking precedent over my own, but even though I was able to make the other rules work, I cannot for the life of me figure out how to specify this one.

.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 is the name of the game and if you deal with Bootstrap, you'll quickly learn that it get's very complicated and even nigh impossible. While using #ids and !important may be an immediate remedy to your situation, it will bite you in the @rse if they are used even if only moderately. Try using only a few #id if you must and avoid !important at all costs.

A safer solution is to double up on a class:

As a nonsense special case for (2), duplicate simple selectors to increase specificity when you have nothing more to specify.

MDN - The !important exception

The following demo has each table section (i.e. <thead>, <tbody>, and <tfoot>) with it's last row border-bottom a different color. Note that the bootstrap.css file is loaded as well, so it does work to the best of my knowledge and evidence at hand.

Demo

.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

Give your tags an id instead of a class. This way, when you go to style the certain element with the id in your css, it will be at a higher priority than the Bootstrap style, which would erase the need for !important in most cases

So say you add an id to your table tag in the html like so

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

You should be able to do this with success

#main-table {   
  width: 100%; 
} 

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

Answer 3

Sometimes you will have to use !important to override Bootstrap styles like so

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