Основываясь на коде, который я использую ниже, моя таблица испорчена при использовании фиксированного столбца. Кажется, что моя таблица перекрывается в первых трех левых столбцах. Я подозреваю, что scrollX создает проблему, потому что без него таблица выглядит прекрасно.
Любые идеи, почему это происходит и как это решить?
$('#example').DataTable( {
scrollY: "300px",
scrollX: true,
scrollCollapse: true,
paging: false,
fixedColumns: {
leftColumns:3
}
} );
<table id = "example" class = "table table-striped table-bordered table-hover table-checkable" style = "width:100%">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Extn.</th>
<th>E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger</td>
<td>Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>5421</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Garrett</td>
<td>Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
<td>8422</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Ashton</td>
<td>Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
<td>1562</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Cedric</td>
<td>Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
<td>6224</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
Вы должны правильно прочитать документацию dataTable и включить все внешние скрипты css и js в свой код.
В вашей проблеме отсутствует какой-то внешний скрипт Вот рабочее решение
$(document).ready(function() {
var table = $('#example').DataTable( {
scrollY: "300px",
scrollX: true,
scrollCollapse: true,
paging: false,
fixedColumns: {
leftColumns: 2
}
} );
} );
/* Ensure that the demo table scrolls */
th, td { white-space: nowrap; }
div.dataTables_wrapper {
width: 800px;
margin: 0 auto;
}
<script src = "https://cdn.datatables.net/fixedcolumns/3.2.6/js/dataTables.fixedColumns.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href = "https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.csshttps://cdn.datatables.net/fixedcolumns/3.2.6/css/fixedColumns.dataTables.min.css" rel = "stylesheet"/>
<link href = "https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel = "stylesheet"/>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id = "example" class = "stripe row-border order-column" style = "width:100%">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Extn.</th>
<th>E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger</td>
<td>Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>5421</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Garrett</td>
<td>Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
<td>8422</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Ashton</td>
<td>Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
<td>1562</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Cedric</td>
<td>Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
<td>6224</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
Включать
фиксированные столбцы.dataTables.min.css
dataTables.fixedColumns.min.js
перекрывается значит? сравните Таблица данных и кодовая ручка с вашим gif
вывод codepen такой же, как вы можете видеть на моей гифке, кстати, я уже выполнил все, что указано в таблице данных, импортировав все cdn
зашифровать ответ обновлен
что ты изменил?
отсутствовала внешняя таблица стилей! пожалуйста, примите, если ответ правильный
посмотрев на предоставленный вами codepen, таблица все еще перекрывается