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

I see you have scrollX set to true. What do you want to scroll? — chaggy
– chaggy, Commented Jun 1, 2018 at 15:17
@chaggy i have it because the table will get some like 30 columns, and the idea is to fix both first and last column, and horizontally scroll the other columns — Juan Salvador Portugal
– Juan Salvador Portugal, Commented Jun 1, 2018 at 15:19
@chaggy i tried but nothing change :S, but i noted, when i remove Bootstrap table-bordered class, everything fits perfectly — Juan Salvador Portugal
– Juan Salvador Portugal, Commented Jun 1, 2018 at 15:38
@chaggy the post that you deleted was the solution! why u delete it? :P — Juan Salvador Portugal
– Juan Salvador Portugal, Commented Jun 1, 2018 at 15:46

chaggy · Accepted Answer · 2018-06-01 15:44:20Z

4

It's a hack but you can try,

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

answered Jun 1, 2018 at 15:44

chaggy

1,1511 gold badge10 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Juan Salvador Portugal Over a year ago

Thank you so much! it's exactly what i need!

Hristian Yordanov Over a year ago

I see no borders on left and rifgt after this. Anyway it works. Still, searching for better solution.

Serhii Topolnytskyi · Accepted Answer · 2019-08-02 14:36:21Z

0

If you use BackpackforLaravel bundle, so need only change configuration in config/backpack/crud.php:

'responsive_table' => false,

answered Aug 2, 2019 at 14:36

Serhii Topolnytskyi

8307 silver badges20 bronze badges

Collectives™ on Stack Overflow

Horizontal scroll in fixed column DataTables

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related