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>

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

C'est:

  1. pas de barre de défilement horizontale
  2. div ne pas faire le table et td large
  3. redimensionner la fenêtre du navigateur fait le div changement dynamique de ellipsis

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

23
demandé sur Brian Tompsett - 汤莱恩 2011-05-09 06:50:44

4 réponses

Edit: correction de moi-même à l'aide de CSS:

table { table-layout:fixed; width:100%; }
54
répondu est 2011-05-09 03:14:06

Plutôt que d'utiliser table-layout: fixed; pour votre table, vous pouvez utiliser ce truc pour obtenir un DIV de toujours prendre toute la place D'un TD avec text-overflow: ellipsis; fonctionnalités:

div { width: 0; min-width: 100%; }

Le truc principal est de donner l' 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 de dimensions fluides ou de largeur fixe. Il suffit de donner quelques largeurs minimales pour le contenu selon les besoins.

<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

23
répondu Mark 2014-09-23 19:39:26

Mon exemple :

<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>
4
répondu Raf 2012-12-17 20:03:37

pour moi, 

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

a fonctionné...

0
répondu Shoib Mohammed A 2012-12-24 06:48:05