Missalignment body and header with small screen.

thanh.nd

Hello guys,

I'm using data table with complex header and body. I want to use my custom width for my table by using the following code:
$(document).ready(function() {
var oTable = $("#bodyTable").dataTable({

            "bSort": false,
            "sScrollY": "150px",
            "sScrollX": "100%",
            "bPaginate": false,
            "bFilter": false,        
            "bInfo": false,
            "bAutoWidth": false,
            "aoColumns": [
              { "sWidth": "4%" }, 
              { "sWidth": "4%" }, 
              { "sWidth": "16%" }, 
              { "sWidth": "10%" }, 
              { "sWidth": "2%" }, 
              { "sWidth": "6%" }, 
              { "sWidth": "8%" }, 
              { "sWidth": "8%" }, 
              { "sWidth": "8%" }, 
              { "sWidth": "8%" }, 
              { "sWidth": "8%" }, 
              { "sWidth": "8%" }, 
              { "sWidth": "10%" }]
        });

        $(window).bind('resize', function () {
            oTable.fnAdjustColumnSizing();
        } );

    } );

It is perfect with my screen. But when I resize the screen smaller or changing the screen solution to 1024x768. I got the missalignment between table body and header

Please see the attachment

I do not set the width of columns in HTML code
I also using this style for my table

td, th {
border: 1px solid black;
color: black;
overflow: hidden;
text-overflow: ellipsis;
white-space: no-wrap;
}

Seem like with the small screen, data table compute the width of columns is not good

allan

Thanks for your question - however, per the forum rules can you link to a test case showing the issue please. This will allow the issue to be debugged.

Information on how to create a test page, if you can't provide a link to your own page can be found here.

Thanks,
Allan

thanh.nd

Hi Allan,

Thanks for your feedback, please see the jsfiddle as below
https://jsfiddle.net/kok9ntyL/

When you resize the width of content panel, you will get the missalignment.
In this example, with the width of content is small, data table works well.

allan

It appears to be related to the use of the Bootstrap column classes on the table cells. Removing them allows the table to align as expected.

Allan

thanh.nd

Hi allan,

Thanks for your feedback, it works fine.

thanh.nd

Hi Allan,
In the IE11, I see the scroll vertically. Can you tell me where to disable the x scroll please?
I'm using
"sScrollX": "100%",
I've tried with "sScrollX": false,