Bootstrap 3 - Static table header implementation

Question

I wonder which is the best way to handle static table header in bootstrap 3 and keep the responsive design from bootstrap table css class.

So < thead > tag should be static when scrolling the table rows.

<table class="table table-striped">
  <thead>
  <tr>
    <th>Col1</th>
    <th>Col2</th>
    <th>Col3</th>
    <th>Col4</th>
  </tr>
 </thead>
 <tbody>
 <tr>
    <td>Some data..</td>
    <td>Some data..</td>
</tr>
....

Answer 1

I can't comment as I don't have enough rep yet.

So basically you want to turn off the responsive part of the thead element in bootstrap? Just normal?

Answer 2

CSS

tr {
width: 100%;
display: inline-table;
height:60px;
table-layout: fixed;

}

table{
 height:300px; 
 display: -moz-groupbox;
}
tbody{
  overflow-y: scroll;
  height: 200px;
  width: 100%;
  position: absolute;
}

HTML

<table class="table table-striped">
  <thead>
  <tr>
    <th>Col1</th>
    <th>Col2</th>
    <th>Col3</th>
    <th>Col4</th>
  </tr>
 </thead>
 <tbody>
 <tr>
    <td>Some data..</td>
    <td>Some data..</td>
    <td>Some data..</td>
    <td>Some data..</td>
</tr>
 <tr>
    <td>Some data..</td>
    <td>Some data..</td>
    <td>Some data..</td>
    <td>Some data..</td>
</tr>
 <tr>
    <td>Some data..</td>
    <td>Some data..</td>
    <td>Some data..</td>
    <td>Some data..</td>
</tr>
 <tr>
    <td>Some data..</td>
    <td>Some data..</td>
    <td>Some data..</td>
    <td>Some data..</td>
</tr>
 <tr>
    <td>Some data..</td>
    <td>Some data..</td>
    <td>Some data..</td>
    <td>Some data..</td>
</tr>

Try this..