Linha longa na Tabela HTML manchando o layout de outras linhas

Question

Eu tenho uma tabela html servindo como layout de uma página (má prática eu sei). Esta tabela é algo como isto:

Label1    Value1
Label2    Value2
Label3    Value3
Label4    Value4a   Value4b    Value4c   Value4d

Acabei de adicionar uma mensagem de erro de validação que pode ser bastante grande para uma linha, então agora é:

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

Para fazer o trabalho de design eu adicionei um colspan para a célula que tem a mensagem de validação, para que eles tomem a tabela inteira. Ele funciona com mensagens de erro de comprimento pequeno o suficiente para não transbordar a mesa. Outros, que eu recebo:

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

A linha 4 é completamente desarrumada. Existe uma maneira para especificar que o conteúdo da célula mensagem de erro deve transbordar a mesa, em vez de ampliar o espaço para outras células nas mesmas colunas? Talvez alguns CSS mágica?

Answer 1

Para tornar o texto se estender para fora da mesa, o elemento de texto ou tem que estar a um nível mais elevado (hierarquicamente) do que a mesa, ou ela tem de ser posicionado sem relação com a tabela.

Você pode realizar a tarde fazendo algo como:

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

E, em seguida, dando a classe exterior:

.outside
{
    position:absolute;
}

Você vai ter que fazer mais alguma formatação para obtê-lo a mostrar-se no local de correção.

EDIT:

Apenas percebeu os limpa formatação um pouco se você usar ideia de José bem e span vez de div.

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

Answer 2

Ok, aqui está a solução que eu teste já e funciona no 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

Isto é muito hackish, mas pode trabalhar para a sua situação. Se possíveis larguras estáticos oferta para cada um de vocês células de conteúdo. Em seguida, adicione uma célula extra sem uma largura. A última célula deve em seguida, expanda deixando os outros na sua largura set.

Edit: Com base no seu comentário Você também pode tentar dar a mensagem de erro maior z-index em css. Você também vai precisar para definir as mensagens posição para fazer este trabalho.