Firefox specific issue: Datatable unecessary Child Row issue when bootstrapped and responsive

kapilnarula

I am using datatables for a long time. However, I have encountered styling issues in the latest version. The html header details specific to datatables are as below:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.0/css/select.bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.1.0/css/responsive.dataTables.css"/>

OS: Ubuntu 16.04 LTS

The application works fine in Chrome Version 52.0.2743.116 (64-bit) and all my datatables are shown properly. However, when I open in Firefox 49.0 it creates an unnecessary child row out of the last column. This firefox misalignment issue happens for all datatables in my webapp

Please refer to the snapshots of both chrome and firefox.

I then reverted to older versions of datatables and the application worked fine in both Firefox and Chrome

Seems something is broken in your latest version. Can you please identify the issue

Let me know incase you need application login details. I will send them in private as I cannot post login details in public forum.