Я пытаюсь использовать этот пример введите здесь описание ссылки и создайте красивую таблицу с фиксированным заголовком и прокруткой. Я использую 4 колонки с разной шириной, которая составляет 10%, 50%, 30% и 10%. Я делаю это, потому что я тестирую вид страницы на другом экране, и это тот, который подходит лучше всего для всех.
Моя проблема заключается в том, что все строки имеют разную ширину с заголовком, что Проблемы с выравниванием.
Мой HTML:
<table class="table table-hover table-fixed" id="example" style="width:100%; margin-top:20px;font-size:90%;">
<thead>
<tr>
<th style="width:10%;">#</th>
<th style="width:50%;">Name</th>
<th style="width:30%;">Enabled</th>
<th style="width:10%;">Action</th>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td>12</td>
<td>Something here...</td>
<td>Yes</td>
<td><a href="###" class="btn btn-success btn-sm">Edit</a></td>
</tr>
<tr>
<td>23</td>
<td>Something here... part 2</td>
<td>No</td>
<td><a href="###" class="btn btn-success btn-sm">Edit</a></td>
</tr>
<tr>
<td>35</td>
<td>Something here... part 3</td>
<td>Yes</td>
<td><a href="###" class="btn btn-success btn-sm">Edit</a></td>
</tr>
</tbody>
<tfoot>
<tr>
<th>#</th>
<th>Name</th>
<th>Enabled</th>
<th>Action</th>
</tr>
</tfoot>
</table>
Мой css:
.table-fixed thead, .table-fixed tfoot {
width: 100%;
}
.table-fixed tbody {
height: 450px;
overflow-y: auto;
width: 100%;
padding-left:-5px;
}
.table-fixed thead, .table-fixed tbody, .table-fixed tfoot, .table-fixed tr, .table-fixed td, .table-fixed th {
display: block;
}
.table-fixed tbody td, .table-fixed thead > tr> th, .table-fixed tfoot > tr> th {
float: left;
border-bottom-width: 0px;
}
Мой размер теперь такой же, как у заголовка, поэтому выравнивание не правильно. Это из-за размера полосы прокрутки.
Использование Bootstrap 3. И только css, если возможно.