Bootstrap table fixed header align with <tbody> issue - html

Question

I am trying to create a fixed header on Bootstrap table with CSS.
CSS
table.scroll tbody, table.scroll thead {
display: block;
}
table.scroll tbody {
height: 600px;
overflow-y: auto;
overflow-x: hidden;
}
HTML
<table id="standart_list" class="table table-bordered scroll">
<thead>
<tr>
<th>Standart Kodu</th>
<th>Standart Tanımı</th>
<th>Standart(Asgari Şart)</th>
<th>Standart Durum Karşılanıyor Mu?</th>
<th>Mevcut Durum</th>
<th>Açıklama</th>
</tr>
</thead>
<tbody>
<tr bgcolor="#7fffd4">
<td>
ADLİ TIP
</td>
</tr>
<tr>
<input type="hidden" name="brans_2882" value="2">
<td>
2.1.1
</td>
<td style="max-width: 600px">
EĞİTİCİ SAYISI
</td>
<td>
1
</td>
<td>
<select name="select_2882" id="select_2882" class="form-control">
<option value="1">Evet</option>
<option value="0" selected="">Hayır</option>
</select>
</td>
<td>
<input type="text" name="input_2882" id="input_2882" value="0" class="form-control mevcut_durum numeric" required="">
<span class="errmsg"></span>
</td>
<td>
<textarea name="text_2882" id="text_2882" class="form-control aciklama" required="">bu büyüklüğe</textarea>
</td>
</tr>
</tbody>
</table>
<tbody> looks good and scrolling works. But <thead> elements do not align with <tbody>.
How can I solve this?
Here is screen which looks as described:
Thanks!

Answer 1

The below works on browsers newer than IE9, to get it to work in older browsers you will need to use fixed column widths unfortunatley.
Source: Source page for my answer
table {
width: 100%;
}
thead, tbody, tr, td, th { display: block; }
tr:after {
content: ' ';
display: block;
visibility: hidden;
clear: both;
}
thead th {
height: 30px;
/*text-align: left;*/
}
tbody {
height: 120px;
overflow-y: auto;
}
thead {
/* fallback */
}
tbody td, thead th {
width: 19.2%;
float: left;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-striped">
<thead>
<tr>
<th>Make</th>
<th>Model</th>
<th>Color</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
</tbody>

Answer 2

Try removing this part:
table.scroll tbody,
table.scroll thead { display: block; }

Answer 3

I found the solution in a previous stackoverflow post.
Scrollable table with fixed header in bootstrap with solution fiddle in second comment.
Another solution:
How to display scroll bar onto a html table