Comment puis-je configurer la cellule de tableau à une largeur minimum à l'exception de la dernière colonne?

J'ai une table avec 100% de largeur. Si j'ai mis <td>s, ils se propage avec la même longueur de colonnes. Cependant, je veux toutes les colonnes sauf la dernière à l'avoir comme petite largeur possible, sans l'habillage du texte.

Ce que j'ai fait la première était que je width="1px" dans tous les <td>s, sauf la dernière (bien que déconseillé, mais le style="width:1px" n'ont pas d'effet), ce qui a bien fonctionné jusqu'à ce que j'avais multi-parole de données dans la colonne. Dans ce cas, pour garder la longueur de la plus petite possible, il a enveloppé mon texte.

Laissez-moi vous montrer. Imaginez ce tableau:

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

Peu importe ce que je cherche, ce que je reçois est 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") ce:

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

Je veux obtenir le tableau que j'ai présenté en premier. Comment puis-je y parvenir? (Je préfère rester à la norme et à l'aide de CSS. Honnêtement, je ne m'inquiète pas si IE n'a pas mis en œuvre la partie de la norme)

Plus d'explication: Ce dont j'ai besoin est de garder les colonnes aussi court que possible sans emballage mots (dernière colonne doit être aussi grand qu'il doit faire de la largeur de la table en fait atteindre 100%). Si vous connaissez LaTeX, ce que je veux, c'est la manière dont les tables apparaissent naturellement en LaTeX lorsque vous définissez leur largeur à 100%.

Remarque: j'ai trouvé cette mais il me donne toujours le même tableau.

Apparemment, il est! L'embarras de l'un de trop, étant donné que j'ai juste mal lu le css champ.

InformationsquelleAutor Shahbaz | 2011-11-22

47

whitespace-wrap: nowrap n'est pas valide css. C'est white-space: nowrap vous êtes à la recherche pour.

InformationsquelleAutor 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%
}

Cela a fonctionné parfaitement. Merci!
Fait ma journée aussi 🙂 <3
J'ai dû retourner le width approche pour mes besoins comme je l'ai plusieurs colonnes larges (plutôt que d'une colonne large que la solution ci-dessus fonctionne le mieux pour). J'ai enlevé width: 99% de expand et a ajouté width: 1% à shrink et cette solution a bien fonctionné pour moi!
Très joli! Si vous voulez la même colonne à être élargi, au lieu de balisage, le tout avec une classe, j'ai fait ça: td:nth-child(1), td:nth-child(2){white-space:nowrap;} td:nth-child(3){width: 99%;} -- en tout cas tout les débutants en baisse par. 🙂
Dans cette réponse (stackoverflow.com/questions/9623601/...) j'ai créé un script jQuery, qui vous permet de copier le col's class des attributs de la valeur de la table correspondante tds

InformationsquelleAutor yunzen

33
```
td:not(:last-child){
    white-space: nowrap;
}

td:last-child{
    width: 100%;
}
```
En utilisant le code ci-dessus, la dernière table-cell vais essayer d'être le plus grand possible, et de vous prévenir de l'avant que de l'emballage. Cela fait la même chose que les autres réponses, mais de façon plus efficace.
- L'amour de la simplicité.
- Pour info, au moins dans IE11 (mode edge), ont pour ajouter width: 1px; à la non-dernier enfant de style pour obtenir des non-dernière colonne à rendre avec un minimum de largeur.
- Clairement la solution la plus propre sur cette page!
InformationsquelleAutor Gust van de Wal

Sujet légèrement différent, mais peut-être que ça aide quelqu'un qui trébuche sur cette question comme moi.

_{(je viens de voir le commentaire par Campbeln qui suggère exactement ce après avoir écrit ma réponse ci-dessous, de sorte que ce qui est essentiellement une explication détaillée de son commentaire)}

J'ai eu le problème dans l'autre sens: je voulais mettre une colonne de table à la largeur minimale possible sans le briser sur l'espace blanc (dernière colonne dans l'exemple suivant), mais de l'autre, la largeur doit ê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;
}

Colonnes avec classe shrink seulement étendre à la largeur minimale mais d'autres restent dynamiques. Cela fonctionne parce que width de td est automatiquement étendu pour s'adapter à tout le contenu.

Exemple Extrait

CSS:

table {
  width: 100%;
}

td {
  padding: 10px;
}

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

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>

InformationsquelleAutor Markus

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

CSS:

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;
}

HTML:

<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/

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

1

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

Ne pas utiliser white-space: nowrap utilisation white-space: pre; à la place.

Dans la cellule de la table d'éviter tout format de code comme de nouvelles lignes et le retrait (espace blanc) et l'utilisation <br> pour définir une nouvelle ligne de texte/ligne. Comme ceci:
```
<td>element1<br><strong>second row</strong></td>
```
Démo sur CodePen

InformationsquelleAutor Matěj Kříž
0

Une combinaison de white-space: nowrap ou white-space: pre avec min-width: <size> va faire le travail. width: <size> sur elle-même n'est pas assez pour tenir la table à partir serrant.

InformationsquelleAutor rubmz

Vous devez vous connecter pour publier un commentaire.