Datatables always have a little bit overflow-x

molderng

Hi all, I'm new to datatable and currently maintaining a datatable from past developers. I cannot create a test case since I don't know the root cause. I understand it is hard to solve without it, so I try to explain clearly here. Hope you can provide some possible directions for investigation. Thank you in advance.

Problem:
For all datatables, there is a little bit overflow-x covering the right border. I expect it can be shown completely without scrolling.

Findings:

First, here is my column width setting:

"columns": [
        { "data": "c1", "width" : "50", className: "dt-body-left" }
        ,{ "data": "c2", "width" : "50", className: "dt-body-left" }
        ,{ "data": "c3", "width" : "50", className: "dt-body-left" }
        ,{ "data": "c4", "width" : "50", className: "dt-body-left" }
        ,{ "data": "c5", "width" : "50", className: "dt-body-left" }
        ,{ "data": "c6", "width" : "50", className: "dt-body-left" }
        ,{ "data": "c7", "width" : "50", className: "dt-body-right" }
        ,{ "data": "c8", "width" : "50", className: "dt-body-right" }
        ,{ "data": "c9", "width" : "50", className: "dt-body-right" }       
       ]

But I found that each column width is 67px using DOM explorer. I suspect there is a min-width setting for responsive table.

Secondly, here is my customized setting for your reference:

 $.extend( $.fn.dataTable.defaults, {
    "responsive": true,
    "scrollY":        "",
    "scrollCollapse": false,
    "scrollX": true,

    "columnDefs": [
        { className: "dt-body-center", "targets": "_all" }
    ]

Thirdly, I tried to put it in a wider screen, the responsive table works --> the right border is still covered.

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

Hi @molderng ,

Styling issues are impossible to diagnose without seeing the problem. If you can't create a test case, we would really need to see the page itself. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin