Horizontal scroll in fixed column DataTables

Question

I'm working with Bootstrap 4 and DataTables.

I'm having problems when I try to fix columns, each fixed column adds a horizontal scroll

This is my code

var table = $('#tabla').DataTable({
  //scrollY: "300px",
  scrollX: true,
  paging: false,
  fixedColumns: {
    leftColumns: 1,
    rightColumns: 1
  }
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<link href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/fixedcolumns/3.2.4/css/fixedColumns.bootstrap4.min.css" rel="stylesheet" />

<div class="container">

<table id="tabla" class="table table-striped table-bordered nowrap" style="width:100%">
    <thead>
        <tr>
            <th>Código Delfos</th>
            <th>Nota de Venta</th>
            <th>Primer Cliente</th>
            <th>Norma</th>
            <th>Potencia</th>
            <th>Tensión Mayor</th>
            <th>Tensión Menor</th>
            <th>Material de arrollamiento mayor</th>
            <th>Material de arrollamiento menor</th>
            <th>Frecuencia</th>
            <th>Grupo de Conexiones</th>
            <th>Regulación</th>
        </tr>
    </thead>
    <tbody>
     
            <tr>
                <td>07-F0CAAEUAFEJ0000B0001</td>
                <td>11756</td>
                <td>DIR.PROV.ENERGIA DE CORRIENTES</td>
                <td>IRAM 2476</td>
                <td>630,00</td>
                <td>33.000</td>
                <td>13.860</td>
                <td>datos</td>
                <td>datos</td>
                <td>datos</td>
                <td>datos</td>
                <td>33000,00( + 5x5,0000% ; - 5x5,00%)</td>
            </tr>
       

    </tbody>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/fixedcolumns/3.2.4/js/dataTables.fixedColumns.min.js"></script>

As you can see the table got totally bugged because of that both scrolls (first and last columns) and you can also see that by moving the scroll, you can see the contents of the back cells.

What i'm doing wrong?

I based my code on DataTables Fixed Column for Bootstrap 4

Thanks so much, and sory for my horrible english

Answer 1

It's a hack but you can try,

<style>
    .DTFC_LeftBodyLiner{overflow-y:unset !important}
    .DTFC_RightBodyLiner{overflow-y:unset !important}
</style>