Warum funktioniert overflow: hidden in einem <td> nicht?

Ich habe eine Tabellenzelle, für die ich immer eine bestimmte Breite haben möchte. Es funktioniert jedoch nicht mit großen Zeichenfolgen mit nicht beabstandetem Text. Hier ist ein Testfall:

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>

Wie kann ich erreichen, dass der Text am Rand der Box abgeschnitten wird, anstatt die Box erweitern zu lassen?

Hier ist das gleiche Problem .

Sie müssen Set table-layout:fixed und eine geeignete Breite auf dem Tisch Element sowie overflow:hiddenund white-space: nowrapauf den Tabellenzellen.

Beispiele

Spalten mit fester Breite

Die Breite der Tabelle muss gleich (oder kleiner) sein als die Zelle (n) mit fester Breite.

Mit einer Spalte mit fester Breite:

* {
  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>

Mit mehreren Spalten mit fester Breite:

* {
  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>

Säulen mit fester und flüssiger Breite

Eine Breite für den Tisch muss festgelegt werden , aber jede zusätzliche Breite wird einfach von den Flüssigkeitszellen übernommen.

Mit mehreren Spalten, fester Breite und Flüssigkeitsbreite:

* {
  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>

So sind TDs eben. Ich glaube, es kann daran liegen, dass die Eigenschaft 'display' des TD-Elements von Natur aus auf 'table-cell' und nicht auf 'block' gesetzt ist.

In Ihrem Fall besteht die Alternative möglicherweise darin, den Inhalt des TD in einen DIV zu verpacken und Breite und Überlauf auf den DIV anzuwenden.

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

Möglicherweise müssen einige Probleme beim Auffüllen oder Auffüllen von Zellen behoben werden. Entfernen Sie besser die Inline-Stile und verwenden Sie stattdessen externes CSS. Dies sollte jedoch ein Anfang sein.

Wenden Sie CSS table-layout:fixed;(und manchmal width:<any px or %>) auf die TABELLE und den white-space: nowrap; overflow: hidden;Stil auf TD an. Stellen Sie dann die CSS-Breiten für die richtigen Zellen- oder Spaltenelemente ein.

Bezeichnenderweise werden die Spaltenbreiten von Tabellen mit festem Layout durch die Zellenbreiten in der ersten Zeile der Tabelle bestimmt. Wenn sich in der ersten Zeile TH-Elemente befinden und Breiten auf TD (und nicht auf TH) angewendet werden, gilt die Breite nur für den Inhalt des TD (Leerraum und Überlauf können ignoriert werden). Die Tabellenspalten werden unabhängig von der eingestellten TD-Breite gleichmäßig verteilt (da keine Breiten angegeben sind [für TH in der ersten Zeile]), und die Spalten haben [berechnete] gleiche Breiten. Die Tabelle berechnet die Spaltenbreite basierend auf der TD-Breite in den nachfolgenden Zeilen nicht neu. Legen Sie die Breite für die ersten Zellenelemente fest, auf die die Tabelle stoßen soll.

Alternativ und der sicherste Weg zu Satz Spaltenbreiten zu verwenden ist <COLGROUP>und <COL>Tags in der Tabelle auf jedem feste Breite COL mit der CSS Breite gesetzt. CSS in Bezug auf die Zellenbreite spielt sich besser ab, wenn die Tabelle die Spaltenbreiten im Voraus kennt.

Ich bin mit dem spezifischen Problem nicht vertraut, aber Sie könnten ein Div usw. in das td stecken und einen Überlauf darauf einstellen.

Hier ist eine Lösung für Sie, aber ich verstehe nicht wirklich, warum es funktioniert:

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

Das Einwickeln des Zelleninhalts in ein div.

Die beste Lösung besteht darin, ein div in eine Tabellenzelle mit einer Breite von Null zu setzen. Tbody-Tabellenzellen erben ihre Breiten von den im Kopf definierten Breiten. Position: Relative und negative Marge sollten den Trick machen!

Hier ist ein Screenshot: 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>

Sie müssen die Stilattribute der Tabelle festlegen: widthund table-layout: fixed;den 'Überlauf: versteckt' lassen; Attribut funktionieren richtig.

Imo funktioniert dies besser als die Verwendung von divs mit dem widthstyle-Attribut, insbesondere wenn es für dynamische Größenänderungsberechnungen verwendet wird. Die Tabelle verfügt über ein einfacheres DOM, das die Manipulation erleichtert, da keine Korrekturen für Auffüllen und Rand erforderlich sind

Als Extra müssen Sie nicht die Breite für alle Zellen festlegen, sondern nur für die Zellen in der ersten Zeile.

So was:

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

Ich hatte gerade ein ähnliches Problem und musste zuerst das <div>Innere des verwenden <td>(John MacIntyres Lösung funktionierte aus verschiedenen Gründen nicht für mich).

Beachten Sie aber , dass <td><div>...</div></td>nicht gültig Platzierung für ein div ist so stattdessen eine verwende ich <span>mit display:block;Set. Es validiert jetzt gut und funktioniert.

Einfachste und einfachste Lösung, die funktioniert:

table { table-layout: fixed }

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

Um es einfacher zu machen, schlage ich vor, ein Textfeld in das td einzufügen, das den Überlauf automatisch verwaltet

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

müssen verbessert werden

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

zeigt 123456 an