Column Alignment

columnDefs: [
                { targets: [1, 2], className: "cssMyRightAlign" },
            ],

CSS

.cssMyRightAlign{
        text-align: right;
    }

But its not aligning column 1 & 2 in right.

Codepen Link https://codepen.io/Sixthsense6/pen/KKeRPXJ

CodePudding user response：

Looks like .cssMyRightAlign is overwritten by a selector with higher precedence. Try adding the !important keyword to it like so:

.cssMyRightAlign{
    text-align: right !important;
}

CodePudding user response：

Finally traced the root cause of the issue.

I stored the JavaScript in separate file and linked it in my Web Page. If I keep the JS in webpage itself then it's working fine.

Storing the Js in separate file and linking the same in webpage header or body is not working as expected.