De défilement horizontale sur le dépassement de tableau

J'ai une table de base dans un récipient. La table sur 25 colonnes. Je suis en train d'ajouter une barre de défilement horizontale sur le dépassement de la table et je suis vraiment très difficile.

Ce qui se passe maintenant, c'est les cellules de la table accueillir le contenu des cellules en ajustant automatiquement la hauteur de la cellule et le maintien d'une largeur de tableau fixe.

J'apprécie toutes les suggestions sur les raisons de ma méthode ne fonctionne pas sur la façon de résoudre ce problème.

Merci beaucoup d'avance!

CSS

.search-table-outter {margin-bottom:30px; }
.search-table{table-layout: fixed; margin:40px auto 0px auto;  overflow-x:scroll; }
.search-table, td, th{border-collapse:collapse; border:1px solid #777;}
th{padding:20px 7px; font-size:15px; color:#444; background:#66C2E0;}
td{padding:5px 10px; height:35px;}
tr:nth-child(even)  {background: #f5f5f5;}
tr:nth-child(odd)   {background: #FFF;}

HTML

<div class="search-table-outter wrapper">
    <table class="search-table inner">
        <tr>
            <th>Col1</th>
            <th>col2</th>
            <th>col3</th>
            <th>col4</th>
            <th>col5</th>
            <th>col5</th>
        </tr>
        <?php echo $rows; ?>
    </table>
</div>

JS fiddle (Remarque: si possible, j'aimerais que la barre de défilement horizontale pour être dans le récipient avec la bordure rouge):
http://jsfiddle.net/ZXnqM/3/

InformationsquelleAutor AnchovyLegend | 2013-11-05
  1. 97

    Je pense que votre dépassement de capacité doit être à l'extérieur sur le conteneur. Vous pouvez également définir explicitement une largeur min pour les colonnes. Comme ceci:

    .search-table-outter { overflow-x: scroll; }
th, td { min-width: 200px; }

    Violon: http://jsfiddle.net/5WsEt/

    • super! c'est totalement ce que j'ai besoin! merci monsieur pour votre solution
    • Merci, a travaillé comme un charme.
    InformationsquelleAutor mayabelle
  2. 6

    À moins que j'ai manifestement mal compris votre question, déplacer overflow-x:scroll de .search-table à .search-table-outter.

    http://jsfiddle.net/ZXnqM/4/

    .search-table-outter {border:2px solid red; overflow-x:scroll;}
.search-table{table-layout: fixed; margin:40px auto 0px auto;   }

    Comme je sais que vous ne pouvez pas donner les barres de défilement pour les tableaux eux-mêmes.

    • Merci pour la réponse. À proximité, mais pas exactement, car la hauteur des cellules (<td>) sont toujours automatiquement ajustée, remarque même si max-height:35px; cellules sont plus grands que 35px...
    InformationsquelleAutor TreeTree
  3. 1

    Une solution que personne n'a mentionné, est d'utiliser une white-space: nowrap pour la table et ajouter overflow-x de l'emballage.

    (http://jsfiddle.net/xc7jLuyx/11/)

    CSS

    .wrapper { overflow-x: auto; }
.wrapper table { white-space: nowrap }

    HTML

    <div class="wrapper">
    <table></table>
</div>

    C'est un scénario idéal si vous ne souhaitez que des lignes avec plusieurs lignes. Pour ajouter des lignes, vous devez utiliser <br/>.

    InformationsquelleAutor The.Bear
  4. 0
       .search-table-outter {border:2px solid red; overflow-x:scroll;}
   .search-table{table-layout: fixed; margin:40px auto 0px auto;   }
   .search-table, td, th{border-collapse:collapse; border:1px solid #777;}
   th{padding:20px 7px; font-size:15px; color:#444; background:#66C2E0;}
   td{padding:5px 10px; height:35px;}

    Vous devez fournir à défiler dans les div.

    InformationsquelleAutor surbhi bakshi
  5. -1

    Sur un site responsive pour mobile le tout doit être en position absolue sur une relative div. Et hauteur fixe. Requête de média définir la pertinence.

    CSS:

    @media only screen and (max-width: 480px){
  .scroll-wrapper{
    position:absolute;
    overflow-x:scroll;
  }

    InformationsquelleAutor user2323922