El encabezado de DataTable no se alinea cuando se usa scrollY . No estoy seguro de por qué está haciendo esto.
Aquí hay un ejemplo de trabajo mínimo.
var dataSet = [ { "id" : "001", "name" : "first last", "age" : "123" }, ]; function doIt() { // just to create some dummy rows for(var i = 0; i < 10; ++i) { dataSet = dataSet.concat(dataSet); } tbl = $('#userStories').DataTable({ data: dataSet, columns: [ { title: "ID", data: "id" }, { title: "Name", data: "name" }, { title: "Age", data: "age" } ], scrollY: "300px", scrollCollapse: true, paging: false, info: true, }); } $(document).ready(doIt); /* can't change these - start */ body>div { margin: 5px; padding: 5px 0; border-bottom: 1px solid black; } table { width: 100%; } table, th, td { border: 1px solid black; border-collapse: collapse; } th+th+th { width: 100% } textarea { width: 95%; height: 100px; background-color: #ffdddd; } input[type='button'], input[type='submit'] { background-color: #ddddff; } /* can't change these - end*/ <html> <head> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css"> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script> </head> <body> <div>select:<br><br><br> <div id="userStoriesWrapper"> <table id="userStories" class="display" style="width:100%"> </div> </div> </body> </html>.dataTables_scrollHeadInner { padding-left: 0px!important; }Esto podría ser un error en https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js
Aparentemente, el elemento de alguna manera termina con: padding-left: 17px;
Esto podría tener algo que ver con la barra de desplazamiento.
El estilo body>div interfiere con los elementos <div> de DataTable, que crea y usa para envolver el encabezado de la tabla.
Puede verlo usted mismo comentando temporalmente la sección body>div de su estilo. También verá que DataTables está agregando un relleno de 17px para ajustar el encabezado para permitir el ancho de la barra de desplazamiento del cuerpo de la tabla.
En la pregunta, menciona can't change these , en cuyo caso, puede forzar el problema anulando el estilo problemático, agregando el siguiente CSS:
div.dataTables_scrollHeadInner { padding-left: 0 !important; } Usar !important es el último recurso: puede causar problemas en otros lugares (aunque entiendo si es aceptable en su escenario).
Idealmente, sería mejor agregar nombres de clase a esos elementos <div> que necesita ajustar, en lugar de usar un body > div , y luego cambiar la hoja de estilo en consecuencia (la que no se puede cambiar :-).