Lange Zeile in HTML-Tabelle das Layout der anderen Linien tainting

Question

Ich habe eine HTML-Tabelle als Layout für eine Seite (schlechte Praxis ich weiß) dienen. Diese Tabelle geht in etwa so:

Label1    Value1
Label2    Value2
Label3    Value3
Label4    Value4a   Value4b    Value4c   Value4d

Habe ich nur noch eine Nachricht Validierungsfehler, die ziemlich groß sein, kann man die Linie, so jetzt ist es:

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

Um die Gestaltung der Arbeit mache ich eine colspan in die Zelle gegeben haben, die die Validierungsnachricht hat, so dass sie die gesamte Tabelle erstreckt. Es arbeitet mit Fehlermeldungen der Länge klein genug, um nicht in die Tabelle überläuft. Anders als das ich bekommen:

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

Zeile 4 ist komplett durcheinander. Gibt es eine Möglichkeit zu geben, dass die Fehlermeldung Zelleninhalt der Tabelle überlaufen sollte, anstatt den Raum für andere Zellen in den gleichen Spalten zu vergrößern? Vielleicht etwas Magie CSS?

Answer 1

, um den Text außerhalb der Tabelle erstrecken zu machen, das Textelementes hat entweder auf einer höheren Ebene (hierarchisch) als die Tabelle sein, oder es hat ohne Beziehung auf den Tisch positioniert werden.

Sie können die später erreichen durch so etwas wie 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 in der Korrektur Lage zu zeigen.

EDIT:

realisiert Nur die Formatierung aufräumt ein wenig, wenn Sie Jose Idee als gut und umspannen statt div verwenden.

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

Answer 2

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>

Answer 3

Dieses sehr hackish ist, aber für Ihre Situation arbeiten. Wenn möglich Versorgungs statische Breiten für jeden von euch Inhaltszellen. Dann fügen Sie eine zusätzliche Zelle ohne Breite. Die letzte Zelle sollte dann erweitern, um die andere auf ihrer Schränkungsweite verlassen.

Edit: Basierend auf Ihren Kommentar Sie können auch versuchen, die Fehlermeldung einen höheren z-index in CSS. Sie müssen auch die Meldungen haben Position diese Arbeit zu machen.