web-dev-qa-db-fra.com

Comment définir la largeur minimale des cellules du tableau sauf la dernière colonne?

J'ai une table avec 100% de largeur. Si je mets <td>s dedans, ils sont répartis avec des colonnes de même longueur. Cependant, je veux que toutes les colonnes, sauf la dernière, aient la plus petite largeur possible, sans envelopper le texte.

Ce que j'ai fait en premier lieu, c’est que j’ai mis width="1px" dans tous les <td>s sauf le dernier (bien que déconseillé, mais le style="width:1px" n’a aucun effet), ce qui a fonctionné jusqu’à ce que la colonne contienne plusieurs données. Dans ce cas, pour que la longueur soit la plus petite possible, le texte a été enveloppé.

Laisse moi démontrer. Imaginez cette table:

---------------------------------------------------------------------------------
element1 | data      | junk here   | last column
---------------------------------------------------------------------------------
elem     | more data | other stuff | again, last column
---------------------------------------------------------------------------------
more     | of        | these       | rows
---------------------------------------------------------------------------------

Peu importe ce que j'essaie, ce que je continue à obtenir est soit ceci:

---------------------------------------------------------------------------------
element1         | data             | junk here        | last column
---------------------------------------------------------------------------------
elem             | more data        | other stuff      | again, last column
---------------------------------------------------------------------------------
more             | of               | these            | rows
---------------------------------------------------------------------------------

ou (même si j'ai mis style="whitespace-wrap:nowrap") ceci:

---------------------------------------------------------------------------------
         |      | junk  | last
element1 | data |       | 
         |      | here  | column
---------------------------------------------------------------------------------
         | more | other | again,
elem     |      |       | last
         | data | stuff | column
---------------------------------------------------------------------------------
more     | of   | these | rows
---------------------------------------------------------------------------------

Je veux obtenir la table que j'ai présentée en premier. Comment est-ce que je réalise ceci? (Je préfère m'en tenir à la norme et utiliser CSS. Honnêtement, je m'en fiche si IE n'a pas implémenté une partie de la norme non plus)

Plus d'explication: Ce dont j'ai besoin, c'est de garder les colonnes aussi courtes que possible sans insérer de mots (la dernière colonne doit être aussi grande que nécessaire pour que la largeur de la table atteigne réellement 100%). Si vous connaissez LaTeX, ce que je veux, c'est comment les tables apparaissent naturellement dans LaTeX lorsque vous définissez leur largeur à 100%.

Note: J'ai trouvé ceci mais cela me donne toujours la même chose que le dernier tableau.

htmlcsshtml-table
97
Shahbaz

whitespace-wrap: nowrap n'est pas valide css. C'est white-space: nowrap que vous recherchez.

45
Ben Lee

Cela fonctionne dans Google Chrome, au moins. ( jsFiddle )

HTML:

<table>
    <tr>
        <td class="shrink">element1</td>
        <td class="shrink">data</td>
        <td class="shrink">junk here</td>
        <td class="expand">last column</td>
    </tr>
    <tr>
        <td class="shrink">elem</td>
        <td class="shrink">more data</td>
        <td class="shrink">other stuff</td>
        <td class="expand">again, last column</td>
    </tr>
    <tr>
        <td class="shrink">more</td>
        <td class="shrink">of </td>
        <td class="shrink">these</td>
        <td class="expand">rows</td>
    </tr>
</table>

CSS:

table {
    border: 1px solid green;
    border-collapse: collapse;
    width:100%;
}

table td {
    border: 1px solid green;
}

table td.shrink {
    white-space:nowrap
}
table td.expand {
    width: 99%
}
86
yunzen
td:not(:last-child){
    white-space: nowrap;
}

td:last-child{
    width: 100%;
}

En utilisant le code ci-dessus, la dernière cellule de la table tentera d'être aussi grande que possible, et vous empêcherez les précédentes de se terminer. Cela fait la même chose que les autres réponses données, mais beaucoup plus efficace.

32
Gust van de Wal

Sujet légèrement différent, mais peut-être que cela peut aider quelqu'un qui trébuche comme moi sur cette question.
(Je viens de voir le commentaire de Campbeln qui suggère exactement cela après avoir écrit ma réponse ci-dessous, il s'agit donc d'une explication détaillée de son commentaire)

J'ai eu le problème dans l'autre sens: je voulais définir une colonne de la table à la largeur minimale possible sans la séparer d'un espace (dernière colonne dans l'exemple suivant), mais la largeur de l'autre devrait être dynamique (y compris les sauts de ligne):

-----------------------------------------------------------------------------------
element1 | data      | junk here which can   | last column, minimum width, one line
                       span multiple lines
-----------------------------------------------------------------------------------
elem     | more data | other stuff           | again, last column
-----------------------------------------------------------------------------------
more     | of        | these                 | rows
-----------------------------------------------------------------------------------

Solution simple:

HTML

<table>
  <tr>
    <td>element1</td>
    <td>data</td>
    <td>junk here which can span multiple lines</td>
    <td class="shrink">last column, minimum width, one line</td>
  </tr>
  <tr>
    <td>elem</td>
    <td>more data</td>
    <td>other stuff</td>
    <td class="shrink">again, last column</td>
  </tr>
  <tr>
    <td>more</td>
    <td>of</td>
    <td>these</td>
    <td class="shrink">rows</td>
  </tr>
</table>

CSS

td.shrink {
  white-space: nowrap;
  width: 1px;
}

Les colonnes de classe shrink ne se développent que jusqu'à la largeur minimale, mais d'autres restent dynamiques. Cela fonctionne car width de td est automatiquement développé pour s’adapter à tout le contenu.

Exemple de fragment

table {
  width: 100%;
}

td {
  padding: 10px;
}

td.shrink {
  white-space: nowrap;
  width: 1px;
}
<table>
  <tr>
    <td>element1</td>
    <td>data</td>
    <td>junk here which can span multiple lines</td>
    <td class="shrink">last column, minimum width, one line</td>
  </tr>
  <tr>
    <td>elem</td>
    <td>more data</td>
    <td>other stuff</td>
    <td class="shrink">again, last column</td>
  </tr>
  <tr>
    <td>more</td>
    <td>of</td>
    <td>these</td>
    <td class="shrink">rows</td>
  </tr>
</table>

7
Markus

Vous pouvez définir la largeur de réparation en plaçant la balise div à l'intérieur de td

table {
    border: 1px solid green;
    border-collapse: collapse;
    width:100%;
}

table td {
    border: 1px solid green;
}

table td:nth-child(1) {
  width: 1%;
}

table td:nth-child(1) div {
  width: 300px;
}
<table>
    <tr>
        <td><div>element1 element1 element1 element1 element1 element1 </div></td>
        <td>data</td>
        <td>junk here</td>
        <td>last column</td>
    </tr>
    <tr>
        <td><div>element2</div></td>
        <td>data</td>
        <td>junk here</td>
        <td>last column</td>
    </tr>
    <tr>
        <td><div>element3</div></td>
        <td>data</td>
        <td>junk here</td>
        <td>last column</td>
    </tr>
</table>

https://jsfiddle.net/8bf17o1v/

3
Стас Пишевский

Si vous avez besoin de plusieurs lignes de texte dans la cellule du tableau.

N'utilisez pas white-space: nowrap, utilisez plutôt white-space: pre;.

Dans la cellule de tableau, évitez tout format de code comme les nouvelles lignes et les renfoncements (espaces) et utilisez <br> pour définir une nouvelle ligne/ligne de texte. Comme ça:

<td>element1<br><strong>second row</strong></td>

Démo sur CodePen

1
Matěj Kříž

Une combinaison de white-space: nowrap ou white-space: pre avec min-width: <size> fera l'affaire. width: <size> sur lui-même n'est pas suffisant pour empêcher la table de presser.

0
rubmz