Comment puis-je limiter la largeur de la table de l'élément conteneur (ou de l'écran)?

J'ai besoin d'afficher des données tabulaires à l'aide d'un table, mais il sera dans un fluide de mise en page; je veux avoir un il remplir toute la largeur disponible, mais ne s'étend horizontalement au-delà de l'écran maximum de largeur, de telle sorte que la body n'a pas de barre de défilement horizontale. Au lieu de la trop grande td éléments doit obtenir la barre de défilement.

Dans l'exemple il n'y a DATA dans le table, le table a border:1px solid black et la sortie doit être d'analyser facilement lorsque les canalisations de curl (d'où le white-space:pre); La div est juste normal de mise en page CSS helper, si possible, débarrassons-nous de ce que, trop!

L'important, c'est qu'elle ne doit pas être fixe, largeur de pixel type de mise en page, et la table doit être plus petite que la largeur disponible dans le cas les données n'a pas besoin de beaucoup d'espace. Donc, pour résumer, un simple tableau qui n'a tout simplement pas obtenir plus large que l'écran. Idéalement, le table serait seulement étirer l'élément parental jusqu'à ce que le max-width de l'élément englobant est atteint et puis ne pas obtenir la plus large.

Dans Chrome, avec quelque chose que je considère comme un mal de hack, je dois garder le table à la largeur maximale disponible et pour afficher les barres de défilement sur le td si nécessaire. Toutefois, cela ne fonctionne pas pour les FF, mais ce n'est pas la solution de quelque chose qui peut être considéré comme un correct.

Suivant l'exemple de ce qui peut être trouvé à https://hydra.geht.net/table-quirx.html pendant un certain temps:

<head>
<title>Obey max-width for table</title>
<style>
.nw             { white-space:nowrap }
.quirx div      { width:100%; max-width:100%; white-space:pre }
.quirx td       { max-width:90px; border:1px solid black }
.quirx td+td    { max-width:500px; overflow:auto }
table.quirx     { width:100%; max-width:100%; border:1px solid black; border-collapse:collapse }
td              { align:left; max-width:100% }
</style>
</head>
<body>
<table summary="" class="quirx"><tr><td colspan="3">
Just some info
</td></tr><tr><td>KEY</td><td><div>DATA (which might contain long lines PRE formatted) XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX </div>
</td></tr></table>
</body>
</html>

Noter que le "colspan=3" pas d'erreur ici, dans mon application, parfois, une troisième colonne peuvent apparaître, ce ne peut pas être connue au moment de l' table en-tête est sortie. (Un peu de style, les choses sont redondants, trop.)

L'astuce ci-dessus, c'est que les td's max-width ensemble sont plus petites que d'habitude écran (590px) et le table puis est étiré à la width, qui est de 100%. Comme le tds ne pas étirer au-delà de l'écran, à l'intérieur div's overflow propriété peut fonctionner comme prévu. Toutefois, dans FF, il ne fonctionne pas de cette façon, ni avec width ni avec max-width (ce qui est probablement dû à leur inline-état). Dans Chrome un width:100% ou similaire ne fonctionne pas sur le td ni la tr éléments. Notez qu'avec max-width on obtient un plus agréable de disposition de table qu'avec width (je ne comprends pas la différence).

En plus du bug que cela ne fonctionne que dans Chrome, un autre bug, c'est que les table utilise le plein écran-largeur même si cela n'est pas nécessaire si ce n'est que petit données à afficher.

Quelques notes à propos de tous:

  • Je pense que c'est ici un très de base et je suis perplexe pourquoi il semble si difficile à exprimer avec des CSS
  • L'objectif est de le garder libre de tout JavaScript, donc uniquement avec des hacks CSS
  • L'utilisateur peut redimensionner la fenêtre, par exemple à partir de 800px de 1920px ou même plus large, et donc la table's largeur doit suivre automatiquement (sans JavaScript)
  • Il doit afficher un bon texte sur les navigateurs web comme Lynx et w3m, trop
  • De sortie ne doit pas être trop encombré pour analyser facilement lorsque les canalisations de curl
  • Il doit afficher plus ou moins correctement sur les principaux 4 (IE, FF, Chrome, Safari)
  • Il ne doit pas casser sur les autres (il peut y avoir des bugs de rendu, mais le contenu ne doit pas être caché)

Je n'ai vraiment aucune idée de comment archive. C'est peut-être une FAQ, mais j'ai été incapable de repérer une solution moi-même.

OriginalL'auteur Tino | 2011-02-06

  1. 18

    (Ma réponse vient un peu plus tard peut-être désiré, mais peut-être qu'il sera utile pour vous ou quelqu'un d'autre, aucun-le-moins...

    Je suis, y compris certains de balisage (ci-dessous) que j'ai fait pour tester le code HTML/CSS de réaliser ce que je crois que vous voulez.

    Il y a une largeur fixe style de cellule "fixedcell" et fluide largeur style de cellule "fluidcell".

    La largeur fixe, j'ai mis à largeur fixe (75px pour cet exemple) simple pour illustrer les choses au mieux.

    Le liquide de largeur ont largeur:auto afin qu'elles remplissent la largeur du reste de l'espace de la table; de plus, ils ont surtout white-space:nowrap de sorte que le texte ne s'étend pas à la hauteur de la cellule-sage (white-space:pre fonctionne aussi); et, enfin, ils ont overflow:hidden de sorte que le texte n'a pas de dépassement de la largeur et de faire les choses laides, vous pouvez également définir overflow:faites défiler pour elle d'avoir une barre de défilement dans les cellules quand/si nécessaire.

    La table est mise pour être sur à 100% de la largeur de sorte qu'il sera élargi à la taille de l'écran/etc en tant que de besoin.
    Et la chose importante concernant le tableau de style, c'est l' table-layout:fixe, ce qui rend la table de respecter la mise en page de la page, plus correctement, plutôt que de dimensionnement automatique qui repose lui-même sur son propre contenu (table-layout:auto).

    J'ai aussi ajouté un peu de frontières pour aider à illustrer les limites du tableau et des cellules.

    <html>
<head>
    <title>Table with auto-width sizing and overflow hiding.</title>
    <style type="text/css">
        table {width:100%; border:solid 1px red; table-layout:fixed;}
        table td {border:solid 1px green;}
        .fixedcell {width:75px;}
        .fluidcell {width:auto; overflow:hidden; white-space:nowrap;}
    </style>
</head>
<body>
    Table with one fluid column:
    <table>
        <tr>
            <td class="fixedcell">row 1</td>
            <td class="fluidcell">a whole bunch of content could go here and it still needs to fit nice into the cell without mucking things up</td>
            <td class="fixedcell">fixie</td>
            <td class="fixedcell">another</td>
        </tr>
    </table>

    Table with two fluid columns:
    <table>
        <tr>
            <td class="fixedcell">row 1</td>
            <td class="fluidcell">a whole bunch of content could go here and it still needs to fit nice into the cell without mucking things up</td>
            <td class="fluidcell">blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</td>
            <td class="fixedcell">fixie</td>
            <td class="fixedcell">another</td>
        </tr>
    </table>
</body>

    Je l'ai testé dans plusieurs navigateurs modernes et semblait fonctionner correctement dans chaque.

    PS. Bien que les tables sont un non-non pour la mise en page en général, les tables sont corrects et encouragée pour des données tabulaires mise en page.

    Cela a été utile. Je suis en cours d'exécution sur les questions et la table-layout semble être en jeu. Merci
    C'est extrêmement utile, merci mec

    OriginalL'auteur devlop