Comment puis-je tronquer les cellules d'un tableau, tout en conservant le maximum de contenu possible ?

Question

Rencontrez Fred. C'est une table :

<table border="1" style="width: 100%;">
    <tr>
        <td>This cells has more content</td>
        <td>Less content here</td>
    </tr>
</table>

L'appartement de Fred a la fâcheuse habitude de changer de taille, il a donc appris à cacher une partie de son contenu pour ne pas bousculer tous les autres logements et pousser le salon de Mme Whitford dans l'oubli :

<table border="1" style="width: 100%; white-space: nowrap; table-layout: fixed;">
    <tr>
        <td style="overflow: hidden; text-overflow: ellipsis">This cells has more content</td>
        <td style="overflow: hidden; text-overflow: ellipsis">Less content here</td>
    </tr>
</table>

Cela fonctionne, mais Fred a le sentiment tenace que si sa cellule droite (qu'il a surnommée Celldito) cédait un peu d'espace, sa cellule gauche ne serait pas tronquée aussi souvent. Pouvez-vous sauver sa santé mentale ?

---

En résumé : comment les cellules d'un tableau peuvent-elles déborder de manière uniforme, et seulement lorsqu'elles ont toutes abandonné tout leur espace blanc ?

Answer 1

<table border="1" style="width: 100%;">
    <colgroup>
        <col width="100%" />
        <col width="0%" />
    </colgroup>
    <tr>
        <td style="white-space: nowrap; text-overflow:ellipsis; overflow: hidden; max-width:1px;">This cell has more content.This cell has more content.This cell has more content.This cell has more content.This cell has more content.This cell has more content.</td>
        <td style="white-space: nowrap;">Less content here.</td>
    </tr>
</table>

http://jsfiddle.net/7CURQ/

Answer 2

Je crois que j'ai une solution non-JavaScript ! Je ne voulais pas me contenter d'une solution JavaScript car je trouve inacceptable la légère gigue des choses qui se déplacent après le chargement de la page.

Caractéristiques :

• Pas de JavaScript
• Pas de mise en page fixe
• Pas d'astuces de pondération ou de pourcentage de largeur
• Fonctionne avec n'importe quel nombre de colonnes
• Génération simple côté serveur et mise à jour côté client (aucun calcul nécessaire)
• Compatible avec tous les navigateurs

Comment cela fonctionne : À l'intérieur de la cellule du tableau, placez deux copies du contenu dans deux éléments différents au sein d'un élément conteneur relativement positionné. L'élément d'espacement est positionné de manière statique et, en tant que tel, il affecte la largeur des cellules du tableau. En permettant au contenu de la cellule d'espacement de s'enrouler, nous pouvons obtenir la largeur "optimale" des cellules du tableau que nous recherchons. Cela nous permet également d'utiliser l'élément à positionnement absolu pour limiter la largeur du contenu visible à celle du parent à positionnement relatif.

Testé et fonctionnant dans : IE8, IE9, IE10, Chrome, Firefox, Safari, Opera

Résultat Images :

JSFiddle : http://jsfiddle.net/zAeA2/

Exemple de HTML/CSS :

<td>
    <!--Relative-positioned container-->
    <div class="container">
        <!--Visible-->
        <div class="content"><!--Content here--></div>
        <!--Hidden spacer-->
        <div class="spacer"><!--Content here--></div>
        <!--Keeps the container from collapsing without
            having to specify a height-->
        <span>&nbsp;</span>
     </div>
</td>

.container {
    position: relative;
}
.content {
    position: absolute;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.spacer {
    height: 0;
    overflow: hidden;
}

Answer 3

J'ai été confronté au même défi il y a quelques jours. Il semble Lucifer Sam trouvé la meilleure solution.

Mais j'ai remarqué que vous devez dupliquer le contenu de l'élément d'espacement. J'ai pensé que ce n'était pas si mal, mais j'aimerais aussi appliquer les règles suivantes title popup pour le texte coupé. Et cela signifie que le texte long apparaîtra pour la troisième fois dans mon code.

Je propose ici d'accéder title de l'attribut :after pseudo-élément pour générer un espacement et garder le HTML propre.

Fonctionne sur IE8+, FF, Chrome, Safari, Opera

<table border="1">
  <tr>
    <td class="ellipsis_cell">
      <div title="This cells has more content">
        <span>This cells has more content</span>
      </div>
    </td>
    <td class="nowrap">Less content here</td>
  </tr>
</table>

.ellipsis_cell > div {
    position: relative;
    overflow: hidden;
    height: 1em;
}

/* visible content */
.ellipsis_cell > div > span {
    display: block;
    position: absolute; 
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1em;
}

/* spacer content */
.ellipsis_cell > div:after {
    content: attr(title);
    overflow: hidden;
    height: 0;
    display: block;
}

http://jsfiddle.net/feesler/HQU5J/

Answer 4

Si Javascript est acceptable, j'ai mis au point une routine rapide que vous pouvez utiliser comme point de départ. Elle essaie d'adapter dynamiquement la largeur des cellules en utilisant la largeur intérieure d'un span, en réaction aux événements de redimensionnement de la fenêtre.

Actuellement, il part du principe que chaque cellule occupe normalement 50 % de la largeur de la ligne, et il réduit la cellule de droite pour maintenir la cellule de gauche à sa largeur maximale afin d'éviter tout débordement. Vous pouvez mettre en œuvre une logique d'équilibrage de la largeur beaucoup plus complexe, en fonction de vos cas d'utilisation. J'espère que cela vous aidera :

Balisage de la ligne que j'ai utilisée pour les tests :

<tr class="row">
    <td style="overflow: hidden; text-overflow: ellipsis">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
    </td>
    <td style="overflow: hidden; text-overflow: ellipsis">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
    </td>
</tr>

JQuery qui s'accroche à l'événement de redimensionnement :

$(window).resize(function() {
    $('.row').each(function() {
        var row_width = $(this).width();
        var cols = $(this).find('td');
        var left = cols[0];
        var lcell_width = $(left).width();
        var lspan_width = $(left).find('span').width();
        var right = cols[1];
        var rcell_width = $(right).width();
        var rspan_width = $(right).find('span').width();

        if (lcell_width < lspan_width) {
            $(left).width(row_width - rcell_width);
        } else if (rcell_width > rspan_width) {
            $(left).width(row_width / 2);
        }
    });
});

Answer 5

Le problème vient de la propriété 'table-layout:fixed' qui crée des colonnes de largeur fixe et régulièrement espacées. Mais la désactivation de cette propriété css va tuer le débordement de texte parce que la table va devenir aussi grande que possible (et qu'il n'y a rien à déborder).

Je suis désolé mais dans ce cas, Fred ne peut pas avoir le beurre et l'argent du beurre. A moins que le propriétaire ne donne à Celldito moins d'espace pour travailler, Fred ne peut pas utiliser son