Erzwingen Sie, dass die Spaltenbreiten von Tabellen unabhängig vom Inhalt immer festgelegt werden

Ich habe eine HTML-Tabelle mit table-layout: fixedund eine td mit einer festgelegten Breite. Die Spalte wird weiterhin erweitert, um den Inhalt von Text aufzunehmen, der kein Leerzeichen enthält. Gibt es eine andere Möglichkeit, dies zu beheben, als den Inhalt jedes td in ein div zu packen?

Beispiel: http://jsfiddle.net/6p9K3/29/

<table>
    <tbody>
        <tr>
            <td style="width: 50px;">Test</td>
            <td>Testing 1123455</td>
        </tr><tr>
            <td style="width: 50px;">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td>
            <td>B</td>
        </tr>
    </tbody>
</table>

table
{
    table-layout: fixed;
}

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

Im Beispiel sehen Sie, dass die Spalte mit AAAAAAAAAAAA ... erweitert wird, obwohl sie explizit auf 50px eingestellt ist.

Geben Sie die Breite der Tabelle an:

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

Siehe jsFiddle

Versuchen Sie, das folgende CSS zu untersuchen:

word-wrap:break-word;

Webbrowser sollten standardmäßig keine "Wörter" aufteilen, sodass das normale Verhalten eines Browsers auftritt. Sie können dies jedoch mit der CSS-Direktive für Zeilenumbrüche überschreiben.

Sie müssten eine Breite für die Gesamttabelle und dann eine Breite für die Spalten festlegen. Breite: 100%; sollte auch in Ordnung sein, abhängig von Ihren Anforderungen.

Die Verwendung von Zeilenumbruch ist möglicherweise nicht das, was Sie möchten. Es ist jedoch nützlich, um alle Daten anzuzeigen, ohne das Layout zu verformen.

Machen Sie den Tisch vor dem CSS steinhart. Stellen Sie Ihre Tabellenbreite fest und verwenden Sie dann eine 'Steuerungs'-Zeile, wobei jeder td eine explizite Breite hat, die sich alle zur Breite im Tabellen-Tag addieren.

Wenn Sie Hunderte von HTML-E-Mails erstellen müssen, um überall zu arbeiten, zuerst den richtigen HTML-Code verwenden und dann mit CSS arbeiten, können Sie viele Probleme in allen IE-, Webkit- und Mozillas-Problemen umgehen.

so:

<table width="300" cellspacing="0" cellpadding="0">
  <tr>
    <td width="50"></td>
    <td width="100"></td>
    <td width="150"></td>
  </tr>
  <tr>
    <td>your stuff</td>
    <td>your stuff</td>
    <td>your stuff</td>
  </tr>
</table>

Hält einen Tisch bei 300px Breite. Sehen Sie sich Bilder an, die extrem größer als die Breite sind

Sie können eine hinzufügen , divmit dem tddas, dann Stil. Es sollte wie erwartet funktionieren.

<td><div>AAAAAAAAAAAAAAAAAAA</div></td>

Dann die CSS.

td div { width: 50px; overflow: hidden; }

Sie können auch mit "overflow: hidden" oder "overflow-x: hidden" (nur für die Breite) arbeiten. Dies erfordert eine definierte Breite (und / oder Höhe?) Und möglicherweise auch einen "display: block".

"Überlauf: Versteckt" verbirgt den gesamten Inhalt, der nicht in das definierte Feld passt.

Beispiel:

http://jsfiddle.net/NAJvp/

HTML:

<table border="1">
    <tr>
        <td><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
        <td>bbb</td>
        <td>cccc</td>
    </tr>
</table>

CSS:

td div { width: 100px; overflow-y: hidden; }

EDIT: Schande über mich, ich habe gesehen, Sie verwenden bereits "Überlauf". Ich denke, es funktioniert nicht, weil Sie "display: block" nicht auf Ihr Element setzen ...

Sie können auch Prozentsätze verwenden und / oder in den Spaltenüberschriften angeben:

<table width="300">  
  <tr>
    <th width="20%">Column 1</th>
    <th width="20%">Column 2</th>
    <th width="20%">Column 3</th>
    <th width="20%">Column 4</th>
    <th width="20%">Column 5</th>
  </tr>
  <tr>
    <!--- row data -->
  </tr>
</table>

Der Bonus mit Prozentsätzen ist eine geringere Codepflege: Sie können Ihre Tabellenbreite ändern, ohne die Spaltenbreiten neu angeben zu müssen.

Vorsichtsmaßnahme: Nach meinem Verständnis wird die in Pixel angegebene Tabellenbreite in HTML 5 nicht unterstützt. Sie müssen stattdessen CSS verwenden.

Ich würde versuchen, es auf maximale Breite einzustellen: 50px;

Das funktioniert bei mir

td::after { 
content: ''; 
display: block; 
width: 30px;
}