Функция FixedColumn не применяется в данных DataTable ⇐ Html

[Anonymous]

Я пытаюсь заморозить первые четыре столбца этого данных, когда пользователь прокручивает его горизонтально. Но стиль «dtfc-has-left» style = «позиция: относительно;» «не применяется, когда я осматриваю данные в браузере, и эта функция не работает. Пожалуйста, дайте мне знать, если кто-то может увидеть причину, по которой замороженные столбцы не применяются. Минимальный рабочий пример: < /p>





DataTables FixedColumns Minimal Example






body {
font-family: Arial, sans-serif;
margin: 20px;
}
/* Container with fixed width and overflow-x auto for horizontal scrolling */
#tableContainer {
border: 1px solid #ccc;
}
/* Prevent wrapping in table cells */
th, td {
white-space: nowrap;
width: 120px;
}
/* Make DataTables scroll wrapper visible */
div.dataTables_wrapper {
width: 100%;
}




DataTables FixedColumns Minimal Example




Action
Estimation ID
Reference ID
Project Name
Status
Result
Change Requests
Client Company
Company Phone
Company Email
Client Budget (£)
Material Value (£)
Tender Value (£)
MarkUp %
Estimated Duration (Days)




Review
101
EST-001
Bridge Construction
Pile Setup Pending
NAY
2
ABC Corp
+1 555-1234
abc@example.com
150,000.00
75,000.00
120,000.00
25.00
90


Proceed
102
EST-002
Building Renovation
Valuation Pending
NAY
0
XYZ Ltd
+44 207-111-2222
xyz@example.com
NAY
NAY
NAY
NAY
NAY


Review
103
EST-003
New Warehouse
Completed
Won
1
MegaCorp
+61 02-1234-5678
megacorp@example.com
500,000.00
200,000.00
450,000.00
15.00
180












$(document).ready(function() {
$('#example').DataTable({
scrollX: true,
scrollY: '300px',
scrollCollapse: true,
paging: true,
fixedColumns: {
leftColumns: 4
},
columnDefs: [
{ width: 120, targets: [0,1,2,3] }
]
});
});






Подробнее здесь: https://stackoverflow.com/questions/796 ... -datatable