Я взял код вертикальных вкладок из https://www.w3schools.com/howto/howto_js_vertical_tabs.asp и добавил данные в верхнюю вкладку. Все работает, но когда я добавляю fixedColumns в таблицу данных, столбцы перекрываются.
Если вынуть фиксированный столбец, таблица выглядит правильно. Единственный фрагмент кода, который я изменил, - это первый div (Лондон). Может кто-нибудь мне помочь? Вот код div:
<div id="London" class="tabcontent">
<h2>Search Results</h2>
<table id="example" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th class="text-warning h5">Account ID</th>
<th class="text-warning h5">Account Name</th>
<th class="text-warning h5">First Name</th>
<th class="text-warning h5">Last Name</th>
<th class="text-warning h5">Address1</th>
<th class="text-warning h5">City </th>
<th class="text-warning h5">State</th>
<th class="text-warning h5">Zip</th>
<th class="text-warning h5">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-success h6">Account1</td>
<td class="text-success h6">Account Name</td>
<td class="text-success h6">Name1</td>
<td class="text-success h6">Name2</td>
<td class="text-success h6">ccccc</td>
<td class="text-success h6">XX </td>
<td class="text-success h6">FF</td>
<td class="text-success h6">11111</td>
<td class="text-success h6">2.222</td>
</tr>
<tr>
<td class="text-success h6">Account1</td>
<td class="text-success h6">Account Name</td>
<td class="text-success h6">Name1</td>
<td class="text-success h6">Name2</td>
<td class="text-success h6">ccccc</td>
<td class="text-success h6">XX </td>
<td class="text-success h6">FF</td>
<td class="text-success h6">11111</td>
<td class="text-success h6">2.222</td>
</tr>
</tbody>
</table>
</div>
И это инициализация с датой:
<script>
$(document).ready(function() {
$('#example').DataTable({
scrollY: "600px",
scrollX: true,
scrollCollapse: true,
paging: true,
fixedColumns: {
leftColumns: 2
}
});
});