Table row colors getting distorted on resize/click events

Table row colors getting distorted on resize/click events

ChethanChethan 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

Answers

  • ChethanChethan Posts: 4Questions: 1Answers: 0

    You can refer the screenshot attached(DataTableDistortion.jpg)

  • tangerinetangerine Posts: 3,365Questions: 39Answers: 395

    What CSS files are you including?

  • ChethanChethan Posts: 4Questions: 1Answers: 0

    Is it because of CSS?

  • tangerinetangerine Posts: 3,365Questions: 39Answers: 395

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

  • ChethanChethan Posts: 4Questions: 1Answers: 0

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

This discussion has been closed.