Это не решает проблему, потому что таблица не имеет фиксированного заголовка. Пожалуйста, прочтите постановку проблемы.
ектирую таблицу с использованием начальной загрузки, адаптивной. Пока меньше нет. колонн, это было хорошо. С фиксированным заголовком все работало нормально.
Теперь мне потребовалось более 20 столбцов в таблице, и она также должна иметь возможность горизонтальной прокрутки.
JSFIDDLE ГОРИЗОНТАЛЬНЫЙ СКРОЛБАР
Я попытался заставить их работать вместе, для фиксированной таблицы заголовков для вертикальной и горизонтальной прокрутки с возможностью прокрутки заголовка.
Я попробовал это:
.table-fixed thead {
width: 97%;
}
.table-fixed tbody {
height: 150px;
overflow-y: auto;
width: 100%;
}
.table-fixed thead,
.table-fixed tbody,
.table-fixed tr,
.table-fixed td,
.table-fixed th {
display: block;
}
.table-fixed tbody td,
.table-fixed thead>tr>th {
float: left;
border-bottom-width: 0;
}
.table-fixed thead {
width: 97%;
}
.table-fixed tbody {
height: 230px;
overflow-y: auto;
width: 100%;
}
.table-fixed thead,
.table-fixed tbody,
.table-fixed tr,
.table-fixed td,
.table-fixed th {
display: block;
}
.table-fixed tbody td,
.table-fixed thead>tr>th {
float: left;
border-bottom-width: 0;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="panel panel-default table-responsive">
<table class="table table-fixed">
<thead>
<tr>
<th class="col-xs-1">S.No.</th>
<th class="col-xs-1">Name</th>
<th class="col-xs-1">Balance</th>
<th class="col-xs-1">Action</th>
<th class="col-xs-1">S.No.</th>
<th class="col-xs-1">Name</th>
<th class="col-xs-1">Balance</th>
<th class="col-xs-1">Action</th>
<th class="col-xs-1">S.No.</th>
<th class="col-xs-1">Name</th>
<th class="col-xs-1">Balance</th>
<th class="col-xs-1">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
</tr>
<tr>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
</tr>
<tr>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
</tr>
<tr>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
</tr>
<tr>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
</tr>
<tr>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
</tr>
<tr>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
</tr>
<tr>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>Я просто добавил повторяющиеся строки, чтобы таблица могла прокручиваться. Как сделать таблицу с возможностью прокрутки по вертикали (с фиксированным заголовком) и по горизонтали (с прокручиваемым заголовком)?