web-dev-qa-db-fra.com

Assurez la largeur de la table à 100% avec le dernier remplissage de colonne le reste sans écraser le contenu/la largeur des autres colonnes

Est-il possible de faire une table (qui aura du texte créé dynamiquement) pour avoir par exemple:

largeur de la table 100% de l'écran 5 colonnes La dernière colonne est vide () Les quatre premières colonnes ont du texte et leur largeur est dynamique reste de la largeur sans écraser le texte des quatre premières colonnes

J'ai ceci jusqu'à présent et ça écrase le texte, c'est ce que j'essaie d'éviter:

<table style="width:100%;" border="1">
<tr>
    <td>One Two Three</td>
    <td>Two Three Four</td>
    <td>Three Four Five</td>
    <td>Four Five Six</td>
    <td style="width:100%;">&nbsp;</td>
</tr>
</table>

Je ne peux pas utiliser "white-space: nowrap" car je souhaite que le texte soit renvoyé à la ligne s'il y a suffisamment de texte.

Edit: "J'aimerais simplement que les [les quatre premières] colonnes aient la même largeur que si je retirais l'attribut width de la balise table. Mais la table doit toujours être 100% de la largeur de la page."

Des idées? Les solutions CSS sont préférables!

htmlcsshtml-table
20
txchou

Vous pouvez utiliser flexbox pour ce faire

CSS

table {
    width:100%;
    border: 1px solid black;
    border-collapse: collapse;
}
td + td {
    border-left: 1px solid black;
}
tr {
    display: flex;
    align-items: stretch;
}
td:last-child {
    flex: 1;
    background: yellow;
    display:inline-block;
    /* to keep IE happy */
}

FIDDLE(Redimensionnez la fenêtre du navigateur pour voir cela en action)

table {
  width: 100%;
  border: 1px solid black;
  border-collapse: collapse;
}
td + td {
  border-left: 1px solid black;
}
td:last-child {
  background: yellow;
}
<table>
  <tr>
    <td>One Two Three</td>
    <td>Two Three Four</td>
    <td>Three Four FiveThree Four FiveThree Four FiveThree Four FiveThree Four Five</td>
    <td>Four Five Six</td>
    <td>&nbsp;f</td>
  </tr>
</table>

NB:

IE 10-11 a pour problème que les éléments en ligne (et apparemment aussi les cellules de tableau) ne sont pas traités comme des éléments flex.

Ce problème est documenté par Phillip Walton ici et la solution (tirée du message ci-dessus) est la suivante:

Ce problème peut être évité en ajoutant une valeur d'affichage non en ligne aux éléments , Par exemple. block, inline-block, flex, etc.

Btw: voici ce à quoi ressemble le même violon ci-dessus sans utiliser flexbox - Notez que la dernière td ne remplit pas réellement l'espace restant, mais occupe plutôt c'est son propre espace naturel - c'est ce que le PO ne voulait PAS.

9
Danield

Il suffit d'ajouter

table-layout: fixed;

à votre table, et vous avez terminé.

En supposant que vos textes dans les autres colonnes ne forcent pas un tableau plus large que 100%, votre dernière colonne sera toujours étirée, il n'est donc pas nécessaire d'appliquer une largeur quelconque sur le <td>.

5
connexo

C'est ce qui a fonctionné pour moi (dans FireFox, Chrome et le vieil Opéra 12.x). Mes tables pour lesquelles je voulais avoir 100% de la largeur et la dernière colonne pour remplir le reste ont la classe tableList et voici CSS:

.tableList { width: 100%; }
.tableList td { width: 1px; } /* min width, actually: this causes the width to fit the content */
.tableList td:last-child { width: 100%; } /* well, it's less than 100% in the end, but this still works for me */

Ci-dessous, il y a un extrait à essayer:

.tableList { width: 100%; }
.tableList td { width: 1px; } /* min width, actually: this causes the width to fit the content */
.tableList td:last-child { width: 100%; background-color: yellow; } /* well, it's less than 100% in the end, but this still works for me */
<table class="tableList">
  <tr><td>game's</td><td>not</td><td>over</td></tr>
  <tr><td>one</td><td>two</td><td>three and more</td></tr>
</table>

Comme Rahat l’a remarqué, si le contenu d’une colonne autre que la première contient plus d’un mot, il devient multiligne (une ligne par mot):

.tableList { width: 100%; }
.tableList td { width: 1px; } /* min width, actually: this causes the width to fit the content */
.tableList td:last-child { width: 100%; background-color: yellow; } /* well, it's less than 100% in the end, but this still works for me */
<table class="tableList">
  <tr><td>game's</td><td>not</td><td>over</td></tr>
  <tr><td>one</td><td>two plus plus</td><td>three and more</td></tr>
</table>

mais il a également suggéré une solution de contournement - en ajoutant white-space: nowrap:

.tableList { width: 100%; }
.tableList td { width: 1px; white-space: nowrap; } /* min width, actually: this causes the width to fit the content */
.tableList td:last-child { width: 100%; background-color: yellow; } /* well, it's less than 100% in the end, but this still works for me */
<table class="tableList">
  <tr><td>game's</td><td>not</td><td>over</td></tr>
  <tr><td>one</td><td>two plus plus</td><td>three and more</td></tr>
</table>

3
YakovL

Essayez cette méthode, pourrait travailler pour vous.

.myTable {
  width: 100%;
}
.myTable td:last-child {
  width: auto;
}
<table class="myTable" border="1">
  <tr>
    <td>One Two Three</td>
    <td>Two Three Four</td>
    <td>Three Four Five</td>
    <td>Four Five Six</td>
    <td>&nbsp;</td>
  </tr>
</table>

Ou via CSS:

table {
  width: 100%;
}

table td:nth-child(-n+4) div
{
  min-width: 100px;
}
0
Javed

Il semble que vous souhaitiez que le navigateur détermine "intelligemment" la largeur de chaque colonne. Vous voulez que les colonnes soient bouclées, mais vous ne voulez pas que leurs largeurs soient aussi petites. Le problème est que, lorsque le navigateur le souhaite, il peut choisir la largeur de chaque colonne de manière arbitraire. 10 pixels? 100 pixels? Bien sûr, les deux seraient valables si vous ne donnez aucune indication au navigateur.

Vous pouvez essayermin-widthetmax-widthen tant que compromis pour que la largeur de vos colonnes soit dynamique mais dans une certaine plage.

S'il est possible qu'une colonne soit vraiment étroite (par exemple, si les données de cette colonne sont constituées de nombres à un chiffre), il peut être préférable d'utiliser uniquement max-width.

0
Anson

Peut-être qu'au lieu de définir la dernière colonne sur 100%, définissez-la sur auto?

<table style="width:100%;" border="1">
  <tr>
    <td>One Two Three</td>
    <td>Two Three Four</td>
    <td>Three Four Five</td>
    <td>Four Five Six</td>
    <td style="width:auto;">&nbsp;</td>
  </tr>
</table>

0
David Zulaica

J'ai résolu le même problème en utilisant max-width = 99% pour la dernière colonne et en donnant des tailles fixes aux autres colonnes.

<table style='width: 100%' border='1'>
  <tr>
    <td style='width:60px'><b>Label 1</b></td>
    <td style='width:120px;'><b>Label 2</b></td>
    <td style='max-width:99%;'><b>Label 3</b></td>
  </tr>
</table>

0
Loic Lacomme