Table row colors getting distorted on resize/click events
Table row colors getting distorted on resize/click events
Chethan
Posts: 4Questions: 1Answers: 0
Hi,
We are facing table row color distortion issue in our application whenever we perform any kind of event like click, scroll or resize.
We got a solution for this as below,
$(window).on('scroll resize', function(){
var table = $('#our-table').DataTable();
table.columns.adjust().draw();
});
We are using properties of datatable like resizeWidth, paginationType, responsive etc.
However this operation has to be done whenever an event occurs. We are looking for better solution so that the datatable need not be adjusted everytime an event occurs.
Thanks,
Chethan
This discussion has been closed.
Answers
You can refer the screenshot attached(DataTableDistortion.jpg)
What CSS files are you including?
Is it because of CSS?
I have no idea. That's why I asked the question.
Below are the CSS getting applied for table and table body
table {
width: 100%;
}
.dataTables_wrapper table.dataTable {
margin: 0px 0px;
}
table.dataTable.no-footer {
border-bottom: 1px solid #111;
}
table.dataTable.no-footer {
border-bottom: 1px solid #111;
}
table {
background-color: transparent;
}
for table body
tbody {
display: table-row-group;
}
.dataTables_wrapper table, .dataTables_wrapper th, .dataTables_wrapper td {
border-collapse: collapse;
}
table.dataTable {
width: 100%;
margin: 0 auto;
clear: both;
}