Datatables фиксированное перекрытие столбцов - PullRequest
0 голосов
/ 30 марта 2020

Я взял код вертикальных вкладок из https://www.w3schools.com/howto/howto_js_vertical_tabs.asp и добавил данные в верхнюю вкладку. Все работает, но когда я добавляю fixedColumns в таблицу данных, столбцы перекрываются. enter image description here

Если вынуть фиксированный столбец, таблица выглядит правильно. Единственный фрагмент кода, который я изменил, - это первый 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
    }
});

});

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...