same - td width css




Fluid table avec td nowrap et text-overflow? (3)

Edit: J'ai corrigé cela moi-même en utilisant CSS:

table { table-layout:fixed; width:100%; }

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 barres de défilement horizontales
  2. div ne fait pas la table et td si large
  3. redimensionner la fenêtre du navigateur rend le changement dynamique div de l' ellipsis

BTW, de toute façon à débordement de text-overflow minic sur Firefox?


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>

Plutôt que d'utiliser la table-layout: fixed; pour votre table, vous pouvez utiliser cette astuce pour obtenir un DIV pour toujours prendre l'espace complet d'un TD avec un text-overflow: ellipsis; fonctionnalité:

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

L'astuce consiste à donner à la largeur quelque chose d'autre que l'auto / le pourcentage, et d'utiliser une largeur minimale 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 taille fluide ou de largeur fixe. Donnez juste quelques min-largeurs pour le contenu si nécessaire.

<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





css3