Problèmes avec les données et la barre de défilement horizontale non désirée

Im espérant que ce est assez simple problème.

Im essayant d'utiliser les tables de données pour créer une table sans défilement horizontal. Le tableau a quelques longues lignes de données dont j'ai besoin pour tenir sur une seule ligne et masquer le dépassement de capacité.

Il me semble que je suis absent quelque chose d'assez basique avec des tables de données ici, mais je n'arrive pas à se débarrasser de la barre de défilement horizontale lorsque la table devient une barre de défilement verticale.

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

Il y a deux tables (les mêmes données), les deux sont initialisés de façon très simple.

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

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

Les styles de la page sont assez simple

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;
 }

source d'informationauteur Dunderklumpen

  1. 11

    En fin de compte, la meilleure solution était de définir la largeur de la table interne:

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

    Toutes les solutions proposées ici avait indésirables recadrage comportement. La limitation de la largeur de la table de cette manière m'a également permis d'ajuster dynamiquement la hauteur de la table tels que la barre de défilement horizontale peuvent apparaître ou disparaître à la demande sans l'introduction d'une barre de défilement horizontale.

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

  2. 5

    Vous pouvez juste ajouter overflow-x: hidden; à la .dataTables_scrollBody si vous ne pouvez pas trouver quelque chose qu'il fixe de façon native dans le script. Malheureusement, vous aurez probablement besoin d'utiliser !important pour augmenter sa spécificité plus haut que la ligne des styles appliqués à l'élément déjà.

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

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

    cela a fonctionné pour moi pendant toutes mes tables.
    Ce fut aussi un problème avec firefox et IE, chrome manipulé c'est très bien pour commencer.

  4. 3

    Vous pouvez utiliser le css de la balise overflow-x:hidden; pour supprimer la barre de défilement horizontale sur la table avec l'id mytable2.

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

    Toutefois, si vous utilisez table-layout:fixed cela ne fonctionne pas, une majorité des navigateurs va traiter le débordement dans leur naturual comportement plutôt que de regarder le css.

    Quelques infos sur table-layout:fixed par Mozilla: https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

    Exemple de violon: http://jsfiddle.net/FBpLA/9/