Bizarre border behavior on tables with a fixed header

I'm encountering the strangest thing. I'm using a simple jquery script to make a thead stay in place while the tbody scrolls. It works really well, except for some strange behavior with the border. Check out the Pen, and you can see the red border at the bottom of each th. I've tried putting it on the thead and the tr of the thead but it always behaves the same. It disappears under... itself? I'm not even sure.

http://codepen.io/sinrise/pen/NrxgWG

I'm using bootstrap and SCSS.

My solution for now is to add a :before to the ths that is just an abs pos box the height of the width of the border I want. It works fine but I'd really like to use an actual border, if possible. Thanks!

HTML

<div class="container">
  <div class="table-fixedheader" style="height: 200px; overflow-y: auto;">
    <table class="table table-striped">
      <thead>
        <tr>
          <th>One</th>
          <th>Two</th>
          <th>Three</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><input type="text" value="#1" /></td>
          <td>Thing</td>
          <td>This is a long desctiption of some thing.</td>
        </tr>
        <tr>
          <td>#2</td>
          <td>Thing</td>
          <td>This is a long desctiption of some thing.</td>
        </tr>
        <tr>
          <td>#3</td>
          <td>Thing</td>
          <td>This is a long desctiption of some thing.</td>
        </tr>
        <tr>
          <td>#4</td>
          <td>Thing</td>
          <td>This is a long desctiption of some thing.</td>
        </tr>
        <tr>
          <td>#5</td>
          <td>Thing</td>
          <td>This is a long desctiption of some thing.</td>
        </tr>
        <tr>
          <td>#6</td>
          <td>Thing</td>
          <td>This is a long desctiption of some thing.</td>
        </tr>
        <tr>
          <td>#7</td>
          <td>Thing</td>
          <td>This is a long desctiption of some thing.</td>
        </tr>
        <tr>
          <td>#8</td>
          <td>Thing</td>
          <td>This is a long desctiption of some thing.</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

CSS

.container { padding: 30px; }

.table-fixedheader table thead tr th {
  border-bottom: 5px solid red;
  position: relative;
}

.table-fixedheader thead {
  background-color: #cccccc;
}

JQ

$(".table-fixedheader").scroll(function() {
  $(this).find("thead").css("transform", "translate(0," + this.scrollTop + "px)");
});