Tableau à l'intérieur d'un div avec max-hauteur

Je veux un défilement de la table. Pour y parvenir, j'envelopper un <table> dans un <div> avec un max-height et overflow: auto. En outre, la <div> a display: inline-block pour s'assurer que la div ajuste la largeur de la table sous-jacente.

<html>
<head>
    <title>Test</title>
    <style type="text/css">
        div { max-height: 100px; display: inline-block;
              overflow: auto; border: 1px solid red; }
        td { border-bottom: 1px solid black; }
    </style>
</head>
<body>
    <div>
        <table>
            <tr><td>bla bla bla bla bla</td></tr>
            <tr><td>bla bla bla bla bla</td></tr>
            <tr><td>bla bla bla bla bla</td></tr>
            <tr><td>bla bla bla bla bla</td></tr>
            <tr><td>bla bla bla bla bla</td></tr>
            <tr><td>bla bla bla bla bla</td></tr>
            <tr><td>bla bla bla bla bla</td></tr>
        </table>
    </div>
</body>
</html>

Dans la plupart des navigateurs (Firefox, Safari, Chrome), ce qui provoque un problème: Si le tableau est plus de 100px, vertical des barres de défilement sont ajoutés sans faire de la div, plus large, provoquant le texte pour envelopper:

Tableau à l'intérieur d'un div avec max-hauteur

Dans IE, il semble "correct":

Tableau à l'intérieur d'un div avec max-hauteur

Est-il un moyen de résoudre ce problème?

Juste une remarque, ce n'travail à l'opéra.

OriginalL'auteur Heinzi | 2011-08-19

  1. 4

    http://jsfiddle.net/3VSZE/44/

    Donc ce qui se passe est en AVANT de la barre de défilement est rendu, il est le réglage de la largeur de la table == largeur de la div contenant. Donc, pour les conversations souci, permet de dire que la largeur de la div est 100px et la largeur de la barre de défilement est de 10px, et la largeur de la table interne est 100px. Lorsque le navigateur tente de rendre la div, il assume une largeur de 100px. Il passe ensuite le long de son petit bonhomme de chemin rendu le contenu de la div. Ensuite la barre de défilement est ajouté et le contenu de la div ont maintenant une largeur totale de 110px (table + barre de défilement), mais la largeur de la div est toujours 100px. Donc, fondamentalement, le navigateur tente de rendre 110px à l'intérieur d'un 100px conteneur, provoquant l'écharpe que vous voyez.

    C'est pourquoi l'ajout d'un deuxième div, et de donner ensuite le div d'une marge de sorte que la barre de défilement, ajustement, les œuvres. J'ai donné un coup dans IE8 et il n'ajoutez pas d'espace supplémentaire (comme je l'ai d'abord pensé qu'il le ferait). Il est intéressant de noter que lorsque vous effectuez cette opération en mode de compatibilité, la div prend toute la largeur de la page. Ce qui se passe dans mon exemple, et à la vôtre. Je ne sais pas comment le corriger; mais c'est hors sujet pour cette question. Je n'ai pas eu le temps de donner IE7 un coup de feu.

    C'est un peu plus propre et aussi que cela fonctionne lorsque le contenu de l'une des lignes est beaucoup plus large:

    http://jsfiddle.net/3VSZE/75/

    <html>
<head>
    <title>Test</title>
    <style type="text/css">
        .a { border: 1px solid red; display: inline-block; }
        .b { width: 100%; overflow: auto; max-height:100px; margin-right: 18px; }
        td { border-bottom: 1px solid black; }
    </style>
</head>
<body>
    <div class="a">
        <div class="b">
            <table>
                <tr><td>bla bla bla bla bla</td></tr>
                <tr><td>bla bla bla bla bla</td></tr>
                <tr><td>bla bla bla bla bla</td></tr>
                <tr><td>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</td></tr>
                <tr><td>bla bla bla bla bla</td></tr>
                <tr><td>bla bla bla bla bla</td></tr>
                <tr><td>bla bla bla bla bla</td></tr>
            </table>
        </div>
    </div>
</body>
</html>
    Fonctionne très bien, merci. J'ai ajouté <meta http-equiv="X-UA-Compatible" content="IE=edge" /> pour prévenir c'est à dire de tomber dans le mode de compatibilité.

    OriginalL'auteur Dave

  2. 0

    Utilisation nowrap https://developer.mozilla.org/en/CSS/white-space

    De l'appliquer à la <td>

    Eh bien, je le texte de retour si la taille de l'écran est trop petit. J' ne pas le texte de retour si la taille de l'écran est assez grand.
    Vous pouvez utiliser les css media queries, de sorte que le nowrap est utilisé uniquement si la fenêtre du navigateur est plus grand que la largeur de l'appareil.

    OriginalL'auteur daveyfaherty