Larga cola en la tabla HTML manchar la disposición de otras líneas

Question

Tengo una tabla HTML que sirve como diseño de una página (mala práctica lo sé). Esta tabla es algo como esto:

Label1    Value1
Label2    Value2
Label3    Value3
Label4    Value4a   Value4b    Value4c   Value4d

Acabo de añadir un mensaje de error de validación que puede ser bastante grande a la línea uno, por lo que ahora es:

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

Para hacer el trabajo de diseño He añadido un colspan a la celda que tiene el mensaje de validación, de modo que se extiende por toda la mesa. Funciona con mensajes de error de longitud suficientemente pequeño como para no desbordar la tabla. Aparte de eso me sale:

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

Línea 4 está completamente desordenado. ¿Hay una manera de especificar que el contenido celular mensaje de error se debe volcar la mesa, en lugar de ampliar el espacio para otras células en las mismas columnas? Tal vez un poco de CSS magia?

Answer 1

Para que el texto se extienden fuera de la tabla, el elemento de texto o bien tiene que estar a un nivel más alto (jerárquicamente) de la mesa, o que tiene que ser posicionado sin relación a la mesa.

Puede llevar a cabo la tarde haciendo algo como:

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

Y a continuación, dar la clase fuera:

.outside
{
    position:absolute;
}

Usted tendrá que hacer algún formato más para conseguir que se muestre en la ubicación de corrección.

EDIT:

Sólo se dio cuenta el formato limpia un poco si utiliza la idea de José, así y Span en lugar de div.

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

Answer 2

Ok, aquí está la solución que he prueba y funciona en 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

Esto es muy hacker pero puede trabajar para su situación. Si anchos estáticas posible de suministro para cada uno de ustedes células de contenidos. A continuación, añadir una célula extra sin un ancho. La última celda entonces debería ampliar dejando a los otros en su anchura conjunto.

Editar: Basado en su comentario También puede tratar de darle el mensaje de error un mayor índice z en css. También tendrá que configurar los mensajes posición para hacer este trabajo.