Table row colors getting distorted on resize/click events

Chethan

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

Chethan

You can refer the screenshot attached(DataTableDistortion.jpg)

tangerine

What CSS files are you including?

Chethan

Is it because of CSS?

tangerine

I have no idea. That's why I asked the question.

Chethan

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;
}