Problemi con i datatables e la barra di scorrimento orizzontale indesiderata

Question

Spero che questo sia un problema abbastanza semplice.

Sto cercando di utilizzare i Datatables per creare una tabella senza scorrimento orizzontale. La tabella ha alcune righe di dati lunghe che devo tenere su una riga e nascondere l'overflow.

Sembra che manchi qualcosa di abbastanza semplice con i dati disponibili qui, ma non riesco a liberarmi della barra di scorrimento orizzontale quando il tavolo ottiene una barra di scorrimento verticale.

http://jsfiddle.net/FBpLA/3/

Ci sono due tabelle (dati identici), entrambi sono inizializzate molto semplice.

$('#mytable').dataTable({ 
    bFilter: false, 
    bInfo: false, 
    bPaginate: false, 
}); 

$('#mytable2').dataTable({ 
    bFilter: false, 
    bInfo: false, 
    bPaginate: false, 
    sScrollY: '150px' 
}); 

Gli stili per la pagina sono abbastanza semplice

body { 
    height:100%; 
    color: #000000; 
    font-family: Helvetica, Arial, Verdana, sans-serif; 
    font-size: 10pt; 
    background-color: #B4D4EC; 
} 
.main-panel { 
    display:block; 
    background:white; 
    padding:20px; 
    height: 100%; 
    position:absolute; 
    width: 700px; 
    top: 139px; 
    bottom: 110px; 
} 
th { 
    text-align:left; 
} 
td { 
    border-spacing:0; 
    white-space:nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    -ms-text-overflow:ellipsis; 
} 

Answer 1

Alla fine la soluzione migliore è stata per impostare la larghezza della tabella interna a:

table-layout:fixed; 
width: 98% !important; 

Tutte le soluzioni elencate qui avuto un comportamento indesiderato ritaglio. Limitare la larghezza della tabella in questo modo mi ha anche permesso di regolare dinamicamente l'altezza della tabella in modo tale che la barra di scorrimento orizzontale possa apparire o scomparire su richiesta senza introdurre uno scorrimento orizzontale.

http://jsfiddle.net/FBpLA/15/

Answer 2

È possibile utilizzare il tag CSS overflow-x:hidden; per rimuovere la barra di scorrimento orizzontale sul tavolo con id mytable2.

#mytable2 
{  
    overflow-y:scroll; 
    overflow-x:hidden; 
} 

Tuttavia, se si utilizza table-layout:fixed questo non funziona, la maggior parte dei browser tratterà l'overflow nel loro comportamento naturual piuttosto che guardare il CSS.

Alcune informazioni table-layout:fixed di Mozilla: https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

Esempio violino: http://jsfiddle.net/FBpLA/9/

Answer 3

Si può solo aggiungere overflow-x: hidden; al .dataTables_scrollBody se non riesci a trovare qualcosa che lo fissa in modo nativo nel copione. Sfortunatamente, probabilmente avrai anche bisogno di usare !important per aumentare la sua specificità più in alto degli stili in linea applicati già all'elemento.

http://jsfiddle.net/SombreErmine/FBpLA/12/

Answer 4

.dataTables_scrollBody 
{ 
overflow-x:hidden !important; 
overflow-y:auto !important; 
} 

questo ha lavorato per me per tutti i miei tavoli. Questo era anche solo un problema con Firefox e IE, Chrome lo gestiva bene per cominciare.