web-dev-qa-db-fra.com

Défilement horizontal en débordement de table

J'ai une table de base dans un conteneur. La table aura environ 25 colonnes. J'essaie d'ajouter une barre de défilement horizontale au débordement de la table et traverse une période très difficile. 

Ce qui se passe maintenant, c’est que les cellules du tableau tiennent compte du contenu des cellules en ajustant automatiquement la hauteur de la cellule et en maintenant une largeur de tableau fixe.

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

Merci 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 (Note: Si possible, j'aimerais que la barre de défilement horizontale soit dans le conteneur avec la bordure rouge): http://jsfiddle.net/ZXnqM/3/

htmlcsscss3stylingusability
48
AnchovyLegend

Je pense que votre débordement devrait être sur le conteneur externe. Vous pouvez également définir explicitement une largeur minimale pour les colonnes. Comme ça:

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

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

91
mayabelle

À moins que j'aie mal compris votre question, déplacez 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;   }

Autant que je sache, vous ne pouvez pas donner de barres de défilement aux tables elles-mêmes.

6
TreeTree
   .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 devriez fournir scroll in div.

0
surbhi bakshi

Une solution que personne n'a mentionnée est d'utiliser white-space: nowrap pour la table et d'ajouter overflow-x au wrapper. 

( 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 voulez pas de lignes à plusieurs lignes. Pour ajouter des lignes, vous devez utiliser <br/>.

0
The.Bear