Lange Zeile in HTML-Tabelle, die das Layout anderer Zeilen verschmutzt

Question

Ich habe eine HTML-Tabelle als Layout für eine Seite (schlechte Praxis, die ich kenne). Diese Tabelle geht ungefähr so:

Label1 Value1 
Label2 Value2 
Label3 Value3 
Label4 Value4a Value4b Value4c Value4d 

ich nur eine Validierungsfehlermeldung hinzugefügt, die ziemlich groß sein, kann man die Linie, es jetzt ist:

Label1 Value1 ErrorMessage 
Label2 Value2 
Label3 Value3 
Label4 Value4a Value4b Value4c Value4d 

Um das Design der Arbeit mache ich habe Der Zelle mit der Überprüfungsmeldung wurde ein Colspan hinzugefügt, sodass sie die gesamte Tabelle umfasst. Es funktioniert mit Fehlermeldungen, deren Länge klein genug ist, um die Tabelle nicht zu überlaufen. Ansonsten bekomme ich:

Label1 Value1 Veeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeery long ErrorMessage 
Label2 Value2 
Label3 Value3 
Label4 Value4a Value4b     Value4c    Value4d 

Zeile 4 ist komplett durcheinander. Gibt es eine Möglichkeit, anzugeben, dass der Zelleninhalt der Fehlermeldung die Tabelle überlaufen soll, anstatt den Speicherplatz für andere Zellen in denselben Spalten zu vergrößern? Vielleicht etwas magisches CSS?

Answer 1

Um den Text außerhalb der Tabelle, das Textelement erstrecken zu machen hat entweder auf einem höheren Niveau (hierarchisch) sein als der Tisch, oder er muss ohne Beziehung zum Tisch positioniert werden.

Sie können die später erreichen, indem wie etwas zu tun:

Label1 Value1 <span class="outside">Veeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeery long ErrorMessage</span> 
Label2 Value2 
Label3 Value3 
Label4 Value4a Value4b     Value4c    Value4d 

Und dann die Außen Klasse geben:

.outside 
{ 
    position:absolute; 
} 

Sie müssen einige weitere Formatierung tun, um es zu zeigen zu erhalten in der Korrekturort

EDIT:

realisiert nur die Formatierung etwas aufräumt, wenn Sie Jose Idee als gut und umspannen statt div verwenden.

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

Answer 2

Dies ist sehr hackisch, aber kann für Ihre Situation funktionieren. Wenn möglich, liefern Sie statische Breiten für jede Ihrer Inhaltszellen. Fügen Sie dann eine zusätzliche Zelle ohne Breite hinzu. Die letzte Zelle sollte sich dann ausdehnen und die anderen mit ihrer eingestellten Breite verlassen.

Edit: Basierend auf Ihrem Kommentar Sie können auch versuchen, die Fehlermeldung eine höhere z-index in CSS geben. Sie müssen auch die Nachrichten position einrichten, damit dies funktioniert.

Answer 3

Ok, hier ist die Lösung, die ich Test habe und arbeitet in Firefox 3:

<style type="text/css"> 
#error { 
    width: inherit; 
    overflow: auto; 
    padding: 0; 
    margin: 0; 
} 
</style> 

<table width="400"> 
    <tr> 
    <td width="100">A</td> 
    <td colspan="3" width="300"> 
     <div id="error">Really long line...</div> 
    </td> 
    </tr> 
    <tr> 
    <td>1A</td> 
    <td>1B</td> 
    <td>1C</td> 
    <td>1D</td> 
    </tr> 
    <tr> 
    <td>2A</td> 
    <td>2B</td> 
    <td>2C</td> 
    <td>2D</td> 
    </tr> 
</table>