Linha longa na Tabela HTML manchando o layout de outras linhas
-
13-09-2019 - |
Pergunta
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?
Solução
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;
}
Outras dicas
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>
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.