web-dev-qa-db-fra.com

Table fluide 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 élargir les table et td
  3. le redimensionnement de la fenêtre du navigateur rend la modification div dynamique de Ellipsis

d'ailleurs, de toute façon à minic text-overflow sur Firefox?

htmlcsscss3html-table
23
est

Edit: corrigé moi-même en utilisant CSS:

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

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

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

L'astuce principale consiste à donner à width autre chose que auto/percent et à 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 au 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

23
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>
4
Raf

pour moi, 

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

travaillé...

0
Shoib Mohammed A