Liquide de table avec td nowrap & text-overflow?

Voici mon problème HTML:

<table style="width:100%">
  <tr>
    <td style="width:100%;overflow:hidden">
      <div style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long
      </div>
    </td>
  </tr>
</table>

Ici est ce que je voulais:

<div style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%">long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long
</div>

Qui est:

Pas de barres de défilement horizontale
div de ne pas faire le table et td si large
de redimensionnement de la fenêtre du navigateur rend le div changement dynamique de ellipsis

btw, de toute façon à minic text-overflow sur Firefox?

Il existe une autre approche dans cette réponse sur comment mélanger text-overflow et les cellules du tableau à l'aide de CSS.

InformationsquelleAutor est | 2011-05-09

56

Edit: fixe moi-même à l'aide de CSS:
```
table { table-layout:fixed; width:100%; }
```
- developer.mozilla.org/en/CSS/table-layout
- J'ai eu la même largeur problème sur ma table de tds et de la table-layout:fixe résolu grâce .
InformationsquelleAutor est
24

Plutôt que d'utiliser table-layout: fixed; pour votre table, vous pouvez utiliser cette astuce pour obtenir un DIV à toujours occuper la totalité de l'espace d'un TD avec text-overflow: ellipsis; fonctionnalités:
```
div { width: 0; min-width: 100%; }
```
Le truc principal est de donner le largeur quelque chose d'autre que automatique/pour cent, et à l'aide d'un min-width de 100%;
```
div { width: 0; min-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.myTable { width: 100%; border-collapse: collapse; }
td { border: 1px solid #000; }

td.td1 { width: 100%; min-width: 50px; }
td.td2 { width: 100px; min-width: 100px; }
td.td3 { width: 150px; min-width: 150px; }

td.td4 { width: 50%; min-width: 50px; }
td.td5 { width: 50%; min-width: 50px; }
td.td6 { width: 150px; min-width: 150px; }
```
La table peut être liquide ou de taille de largeur fixe. Il suffit de donner des min-largeurs pour les contenus en tant que de besoin.
```
<table class="myTable">
    <tr>
        <td class="td1"><div>Very very very long text Very very very long text Very very very long text Very very very long text</div></td>
        <td class="td2"><div>Content 2</div></td>
        <td class="td3"><div>Content 3 also so very lonnnnngggg</div></td>
    </tr>
</table>

<table class="myTable">
    <tr>
        <td class="td4"><div>Very very very long text Very very very long text Very very very long text Very very very long text</div></td>
        <td class="td5"><div>Content 2 has very very very many texts in a very very very long way</div></td>
        <td class="td6"><div>Content 3</div></td>
    </tr>
</table>
```
JSfiddle
- Vieille question, mais c'est une bonne alternative réponse.
- Parfait, je dirais aucun des autres questions de rencontrer la "fluide" exigence
- Cela a été testé sur Chrome, Firefox, Safari, et jusqu'à IE8. Pas sûr au sujet des versions antérieures sans aide. Safari iPad fonctionne très bien, trop.
- Cela a fonctionné parfaitement pour moi et se sent plus souple que le table-layout: fixed solution (je n'aime pas la contrainte d'avoir à mettre en largeurs de chaque colonne). Je vous remercie.
- Je sais que vous êtes excité @momomo, mais s'il vous plaît essayez de garder votre langue sous contrôle. Pensez à Débordement de Pile est plus comme Wikipédia que comme Reddit.
- Et nous sommes tous des adultes ici. À l'aide de la langue profane est valable à la fois. Il ne donne de colère et de frustration, beaucoup mieux que d'utiliser un mot comme 'flipper'. Je rêve d'un monde où l'internet est gratuit à partir de modérateurs et de la censure. Un jour. Mais c'est un autre sujet.
InformationsquelleAutor Mark

Mon exemple complet :

<head>
    <style>
        table {
            width:100%;
            table-layout:fixed;
        }
        td {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <table border="1">
        <tr>
            <td>CHAMPIONNAT</td>
            <td>CHAMPIONNAT</td>
            <td>CHAMPIONNAT</td>
            <td>CHAMPIONNAT</td>
            <td>CHAMPIONNAT</td>
            <td>CHAMPIONNAT</td>
        </tr>
    </table>
</body>

InformationsquelleAutor Raf

pour moi,

<style type='text/css'>
table {
 white-space: normal;
}
</style>

travaillé...

InformationsquelleAutor Shoib Mohammed A

Vous devez vous connecter pour publier un commentaire.