Horizontales Scrollen dataTables.js

Bin ich Schwierigkeiten bekommen mit der horizontalen Bildlaufleiste arbeiten mit dataTables.js. Das erwartete Ergebnis ist eine Tabelle, die mir erlaubt, um horizontal zu scrollen innerhalb der Tabelle. Das aktuelle Ergebnis ist eine Tabelle erstreckt, die sich außerhalb der div-container. Alle Lösungen?

HTML:

<div class="box-body table-responsive">
     <table id="portal-drivers" class="table table-bordered table-striped" cellspacing="0" width="100%">
         <thead>
             <tr>
                 <th>First Name</th>
                 <th>Last Name</th>
                 <th>Email</th>
                 <th>Number</th>
                 <th>Rating</th>
                 <th>Transactions</th>
             </tr>
         </thead>
         <tbody>
             <tr>
                 <td>Bugs</td>
                 <td>Bunny</td>
                 <td>[email protected]</td>
                 <td>(310) 530-6789</td>
                 <td>4.8</td>
                 <td>309239045293459823945234895</td>
             </tr>
          </tbody>                   
     </table>

CSS:

.table-striped > tbody > tr:nth-child(odd) > td, 
.table-striped > tbody > tr:nth-child(odd) > th {
  white-space: nowrap;
}
#portal-drivers {
  overflow: auto;
}

JQuery

$("#portal-drivers").dataTable( {
    "scrollX": true
} );

InformationsquelleAutor Ryan Salmons | 2014-07-12

  1. 8

    Ändern "scrollX" zu "sScrollX": '100%'

    $("#portal-drivers").dataTable( {
    "sScrollX": '100%'
} );

    InformationsquelleAutor Ryan Salmons

  2. 5

    Um datatable scrollbaren (Kopf und Körper), verwenden Sie die Eigenschaft sScrollXInner zusammen mit sScrollX wie folgt:

    $("#my-demo-datable").dataTable( {
    "sScrollX": "100%",
    "sScrollXInner": "110%",
} );
    für mich ändern die "sScrollXInner" auf "100" arbeitete für eine ansprechende show-down.

    InformationsquelleAutor Ramraj Patel

  3. 4

    Versuchen Sie, diese in CSS:

    #portal-drivers {
    overflow-x: scroll;
    max-width: 40%;
    display: block;
    white-space: nowrap;
}
    Wirklich gut funktioniert. Ich habe auch angewendet "sScrollX": '100%' - in datatable-Anwendung, sondern Breite Problem auftreten, für den Kopf.

    InformationsquelleAutor magma

  4. -1

    Für datatable-scroll-in der Lage ,Sie können versuchen, sich diese

    $(document).ready(function() {
    $('#example').DataTable( {
        *"scrollY": 200,
        "scrollX": true
    } );
} )

    InformationsquelleAutor Manpreet

Schreibe einen Kommentar