Probleme mit Datatables und unerwünschte horizontale Bildlaufleiste

Question

Ich hoffe, dies ist ein ziemlich einfaches Problem.

Ich versuche, Datatables zu verwenden, um eine Tabelle ohne horizontales Scrollen zu erstellen. Die Tabelle hat einige lange Datenzeilen, die ich in einer Zeile halten muss, um den Überlauf zu verbergen.

Es scheint, als ob ich hier etwas ziemlich Grundlegendes mit Datenquellen verpasse, aber ich kann nicht scheinen, die horizontale Bildlaufleiste loszuwerden, wenn der Tisch eine vertikale Bildlaufleiste bekommt.

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

Es gibt zwei Tabellen (identische Daten), die beide sehr einfach initialisiert werden.

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

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

Die Stile für die Seite sind recht geradlinig

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

Am Ende war die beste Lösung, um die Breite der inneren Tabelle zu setzen:

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

Alle Lösungen hier hatten Verhalten unerwünscht Zuschneiden aufgeführt. Durch die Begrenzung der Tabellenbreite auf diese Weise konnte ich auch die Höhe der Tabelle dynamisch anpassen, sodass die horizontale Bildlaufleiste bei Bedarf angezeigt oder ausgeblendet werden kann, ohne einen horizontalen Bildlauf einzuführen.

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

Answer 2

Sie die CSS-Tag verwenden können overflow-x:hidden; mit id mytable2 der horizontalen Bild auf dem Tisch zu entfernen.

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

Wenn Sie jedoch table-layout:fixed diese verwenden, funktionieren nicht, eine Mehrheit der Browser den Überlauf in ihrem naturual Verhalten behandeln, anstatt die CSS zu beobachten.

Einige Informationen über table-layout:fixed von Mozilla: https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

Beispiel Geige: http://jsfiddle.net/FBpLA/9/

Answer 3

Sie können nur hinzufügen overflow-x: hidden; zum .dataTables_scrollBody, wenn Sie nicht etwas, das es nativ im Skript behebt finden. Leider müssen Sie wahrscheinlich auch !important verwenden, um seine Spezifität höher als die bereits auf das Element angewendeten Inline-Stile zu erhöhen.

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

Answer 4

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

dies für mich gearbeitet für alle meine Tabellen. Dies war auch nur ein Problem mit Firefox und IE, Chrom behandelt es einfach gut, um mit zu beginnen.