Pourquoi overflow: hidden ne fonctionne pas dans un <td>?

J'ai une cellule de tableau que j'aimerais toujours avoir une largeur particulière. Cependant, cela ne fonctionne pas avec de grandes chaînes de texte non espacé. Voici un cas de test:

td {
  border: solid green 1px;
  width: 200px;
  overflow: hidden;
}

<table>
  <tbody>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
  </tbody>
</table>

Comment faire pour que le texte soit coupé au bord de la boîte, plutôt que de faire agrandir la boîte?

Voici le même problème .

Vous devez définir table-layout:fixed et une largeur appropriée sur l'élément de table, ainsi que overflow:hiddenet white-space: nowrapsur les cellules du tableau.

Exemples

Colonnes à largeur fixe

La largeur du tableau doit être identique (ou inférieure) à la ou aux cellules de largeur fixe.

Avec une colonne de largeur fixe:

* {
  box-sizing: border-box;
}
table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
  max-width: 100px;
}
td {
  background: #F00;
  padding: 20px;
  overflow: hidden;
  white-space: nowrap;
  width: 100px;
  border: solid 1px #000;
}

<table>
  <tbody>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
  </tbody>
</table>

Avec plusieurs colonnes à largeur fixe:

* {
  box-sizing: border-box;
}
table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
  max-width: 200px;
}
td {
  background: #F00;
  padding: 20px;
  overflow: hidden;
  white-space: nowrap;
  width: 100px;
  border: solid 1px #000;
}

<table>
  <tbody>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
  </tbody>
</table>

Colonnes à largeur fixe et fluide

Une largeur pour le tableau doit être définie , mais toute largeur supplémentaire est simplement prise en charge par la ou les cellules de fluide.

Avec plusieurs colonnes, largeur fixe et largeur fluide:

* {
  box-sizing: border-box;
}
table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
}
td {
  background: #F00;
  padding: 20px;
  border: solid 1px #000;
}
tr td:first-child {
  overflow: hidden;
  white-space: nowrap;
  width: 100px;
}

<table>
  <tbody>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
  </tbody>
</table>

C'est comme ça que sont les TD. Je crois que cela peut être dû au fait que la propriété «display» de l'élément TD est intrinsèquement définie sur «table-cell» plutôt que «block».

Dans votre cas, l'alternative peut être d'envelopper le contenu du TD dans un DIV et d'appliquer une largeur et un débordement au DIV.

<td style="border: solid green 1px; width:200px;">
    <div style="width:200px; overflow:hidden;">
        This_is_a_terrible_example_of_thinking_outside_the_box.
    </div>
</td>

Il peut y avoir des problèmes de padding ou de cellpadding à résoudre, et vous feriez mieux de supprimer les styles en ligne et d'utiliser un CSS externe à la place, mais cela devrait être un début.

Appliquez CSS table-layout:fixed;(et parfois width:<any px or %>) au TABLE et au white-space: nowrap; overflow: hidden;style sur TD. Ensuite, définissez les largeurs CSS sur le bon éléments de cellule ou de colonne .

De manière significative, les largeurs de colonne de tableau à disposition fixe sont déterminées par les largeurs de cellule dans la première ligne du tableau. S'il y a des éléments TH dans la première ligne et que les largeurs sont appliquées à TD (et non à TH), alors la largeur ne s'applique qu'au contenu du TD (l'espace blanc et le débordement peuvent être ignorés); les colonnes du tableau se répartiront uniformément quelle que soit la largeur TD définie (car il n'y a aucune largeur spécifiée [sur TH dans la première ligne]) et les colonnes auront des largeurs égales [calculées]; le tableau ne recalculera pas la largeur de la colonne en fonction de la largeur TD dans les lignes suivantes. Définissez la largeur des premiers éléments de cellule que le tableau rencontrera.

Le moyen le plus sûr de définir des largeurs de colonne est également d'utiliser des balises <COLGROUP>et <COL>dans le tableau avec la largeur CSS définie sur chaque COL de largeur fixe. Le CSS lié à la largeur des cellules est plus agréable lorsque le tableau connaît à l'avance les largeurs de colonne.

Je ne suis pas familier avec le problème spécifique, mais vous pouvez coller un div, etc. à l'intérieur du td et définir un débordement à ce sujet.

Eh bien, voici une solution pour vous mais je ne comprends pas vraiment pourquoi cela fonctionne:

<html><body>
  <div style="width: 200px; border: 1px solid red;">Test</div>
  <div style="width: 200px; border: 1px solid blue; overflow: hidden; height: 1.5em;">My hovercraft is full of eels.  These pretzels are making me thirsty.</div>
  <div style="width: 200px; border: 1px solid yellow; overflow: hidden; height: 1.5em;">
  This_is_a_terrible_example_of_thinking_outside_the_box.
  </div>
  <table style="border: 2px solid black; border-collapse: collapse; width: 200px;"><tr>
   <td style="width:200px; border: 1px solid green; overflow: hidden; height: 1.5em;"><div style="width: 200px; border: 1px solid yellow; overflow: hidden;">
    This_is_a_terrible_example_of_thinking_outside_the_box.
   </div></td>
  </tr></table>
</body></html>

À savoir, envelopper le contenu de la cellule dans un div.

La meilleure solution est de mettre un div dans une cellule de tableau avec une largeur nulle. Les cellules du tableau Tbody hériteront de leurs largeurs des largeurs définies dans la tête. Position: la marge relative et négative devrait faire l'affaire!

Voici une capture d'écran: https://flic.kr/p/nvRs4j

<body>
<!-- SOME CSS -->
<style>
    .cropped-table-cells,
    .cropped-table-cells tr td { 
        margin:0px;
        padding:0px;
        border-collapse:collapse;
    }
    .cropped-table-cells tr td {
        border:1px solid lightgray;
        padding:3px 5px 3px 5px;
    }
    .no-overflow {
        display:inline-block;
        white-space:nowrap;
        position:relative; /* must be relative */
        width:100%; /* fit to table cell width */
        margin-right:-1000px; /* technically this is a less than zero width object */
        overflow:hidden;
    }
</style>

<!-- CROPPED TABLE BODIES -->
<table class="cropped-table-cells">
    <thead>
        <tr>
            <td style="width:100px;" width="100"><span>ORDER<span></td>
            <td style="width:100px;" width="100"><span>NAME<span></td>
            <td style="width:200px;" width="200"><span>EMAIL</span></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><span class="no-overflow">123</span></td>
            <td><span class="no-overflow">Lorem ipsum dolor sit amet, consectetur adipisicing elit</span></td>
            <td><span class="no-overflow">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></td>
    </tbody>
</table>
</body>

Vous devrez définir les attributs de style de la table: widthettable-layout: fixed; laisser le 'overflow: hidden;' l'attribut fonctionne correctement.

Imo cela fonctionne mieux que d'utiliser des divs avec le width attribut style, en particulier lors de son utilisation pour des calculs de redimensionnement dynamique, la table aura un DOM plus simple qui rend la manipulation plus facile car les corrections pour le remplissage et la marge ne sont pas nécessaires

De plus, vous ne devez pas définir la largeur pour toutes les cellules, mais uniquement pour les cellules de la première ligne.

Comme ça:

<table style="width:0px;table-layout:fixed">
<tr>
    <td style="width:60px;">
        Id
    </td>
    <td style="width:100px;">
        Name
    </td>
    <td style="width:160px;overflow:hidden">
        VeryLongTextWhichShouldBeKindOfTruncated
    </td>
</tr>
<tr>
    <td style="">
        Id
    </td>
    <td style="">
        Name
    </td>
    <td style="overflow:hidden">
        VeryLongTextWhichShouldBeKindOfTruncated
    </td>
</tr>
</table>

J'ai juste eu un problème similaire et j'ai dû utiliser l' <div>intérieur de la <td>première (la solution de John MacIntyre ne fonctionnait pas pour moi pour diverses raisons).

Notez bien que ce <td><div>...</div></td>n'est pas un emplacement valide pour un div, donc j'utilise à la place un ensemble <span>avec display:block;. Il valide bien maintenant et fonctionne.

Solution la plus simple et la plus simple qui fonctionne:

table { table-layout: fixed }

table td {     
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
}

pour faire plus simple je propose de mettre une zone de texte dans le td qui gère automatiquement le débordement

<td><textarea autofocus>$post_title</textarea></td>

besoin d'être amélioré

<style>
    .col {display:table-cell;max-width:50px;width:50px;overflow:hidden;white-space: nowrap;}
</style>
<table>
    <tr>
        <td class="col">123456789123456789</td>
    </tr>
</table>

affiche 123456