title: How to set the css for tablesorter and bootstrap?
body: <p>Tablesorter could make the sorting correctly in bootstrap 2, but I couldn't find out how to set the color and caret of table header.</p>
  
  <p>The most likely css I found <a href="http://joshmcarthur.com/2012/05/14/bootstrap-tablesorter-styles.html">here</a> is:</p>
  
  <pre><code>table .header {
      cursor: pointer;
  }
  
  table .header:after {
    content: "";
    float: right;
    margin-top: 7px;
    border-width: 0 4px 4px;
    border-style: solid;
    border-color: #000000 transparent;
    visibility: hidden;
  }
  
  table .headerSortUp, table .headerSortDown {
    background-color: #f7f7f9;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  }
  
  table .header:hover:after {
    visibility: visible;
  }
  
  table .headerSortDown:after, table .headerSortDown:hover:after {
    visibility: visible;
    filter: alpha(opacity=60);
    -moz-opacity: 0.6;
    opacity: 0.6;
  }
  
  table .headerSortUp:after {
    border-bottom: none;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #000000;
    visibility: visible;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    filter: alpha(opacity=60);
    -moz-opacity: 0.6;
    opacity: 0.6;
  }
  </code></pre>
  
  <p>but with no luck.</p>
  
  <p>Could anyone share the success story?</p>