Como formatar várias tabelas para alinhamento vertical
https://stackoverflow.com/questions/860671
-
21-08-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Eu ter herdado algum código HTML e pediram para alinhar as duas tabelas para que o texto se alinha entre as duas colunas.
Há uma mesa exterior que fornece um olhar de duas colunas para essa coisa, então duas tabelas internas (um para cada coluna). Cada tabela interna contém caixas que armazenam texto. São essas caixas de texto que o cliente quer alinhadas entre as duas colunas.
Eu posso pensar de algumas maneiras de fazer as linhas de texto "jogo" através das duas colunas, mas nada simples ou elegante.
Aqui está o código html:
<html>
<head>
<title>Test</title>
</head>
<body >
<table width="100%" border="1" cellspacing="2" cellpadding="0">
<tr>
<td width="50%">
<hr align="left" />
<p><center><strong>Left Side</strong></center></p>
<table width="100%" border="1" cellspacing="2" cellpadding="0">
<tr>
<td width="5%">
<strong>1:</strong>
</td>
<td width="90%">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</td>
</tr>
<tr>
<td width="5%">
</td>
<td width="90%">
<hr align="left" />
</td>
</tr>
<tr>
<td width="5%">
<strong>2:</strong>
</td>
<td width="90%">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</td>
</tr>
<tr>
<td width="5%">
</td>
<td width="90%">
<hr align="left" />
</td>
</tr>
</table>
</td>
<td width="50%">
<hr align="left" />
<p><center><strong>Right Side</strong></center></p>
<table width="100%" border="1" cellspacing="2" cellpadding="0">
<tr>
<td width="5%">
<strong>1:</strong>
</td>
<td width="90%">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</td>
</tr>
<tr>
<td width="5%">
</td>
<td width="90%">
<hr align="left" />
</td>
</tr>
<tr>
<td width="5%">
<strong>2:</strong>
</td>
<td width="90%">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</td>
</tr>
<tr>
<td width="5%">
</td>
<td width="90%">
<hr align="left" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
EDIT:. Esclarecimentos adicionais e restrições nessa coisa
-
É criada por um programa de servlet, então a ordem das duas colunas é o loop base. Isto é, um laço escreve a coluna primeira (esquerda), então outro ciclo escreve a segunda coluna (direita). Eles não são loops "blendable." - eles devem executar um após o outro, severamente restringir o que eu estou autorizado a ver com a formatação
-
O cliente tenha especificado "não javascript" nos servlets. É uma restrição empresa.
Eu posso usar o CSS, mas os dois loops (à esquerda, depois à direita) são fixos.
Solução
Não muito certo para entender o que você quer aqui, parece que você quer linhas para ajustar dinamicamente a sua altura com base na sua linha homólogo na outra coluna. Ou seja, a primeira linha no lado esquerdo tem um texto mais longo do que a primeira linha no lado direito, mas você quer ambos os segundas filas para começar alinhado, deixando algum espaço em branco entre o texto da primeira linha na coluna da direita e da segunda fila em a coluna da direita, correto?
Será este o caso, a solução é remover a mesa de embalagem. A tabela já é baseado em colunas, para que você não precisa de uma mesa extra para criar as colunas.
Tente este código:
<html>
<head>
<title>Test</title>
</head>
<body>
<table width="100%" border="1" cellspacing="2" cellpadding="0">
<tr>
<td colspan="2" width="50%">
<p><center><strong>Left Side</strong></center></p>
</td>
<td colspan="2" width="50%">
<p><center><strong>Right Side</strong></center></p>
</td>
<tr>
<tr>
<td width="5%" valign="top">
<strong>1:</strong>
</td>
<td width="45%" valign="top">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</td>
<td width="5%" valign="top">
<strong>1:</strong>
</td>
<td width="45%" valign="top">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</td>
</tr>
<tr>
<td width="5%"> </td>
<td width="45%">
<hr align="left" />
</td>
<td width="5%"> </td>
<td width="45%">
<hr align="left" />
</td>
</tr>
<tr>
<td width="5%" valign="top">
<strong>2:</strong>
</td>
<td width="45%" valign="top">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</td>
<td width="5%" valign="top">
<strong>2:</strong>
</td>
<td width="45%" valign="top">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</td>
</tr>
<tr>
<td width="5%"> </td>
<td width="45%">
<hr align="left" />
</td>
<td width="5%"> </td>
<td width="45%">
<hr align="left" />
</td>
</tr>
</table>
</body>
</html>
Não há necessidade de dizer que esta é uma maneira terrível e muito antiga escola de fazer o que você está fazendo, você é melhor fora de usar divs e css, mas como você disse que herdou o código Eu entendo que um pouco de refatoração não é uma opção.
Outras dicas
OK Eu acho que entendo o problema, a partir do que já foi dito. Se você é capaz de alterar o código-se (você não dizer explicitamente), então a solução mais rápida é a seguinte:
- Usar várias linhas na tabela externa, isto é, colunas 2 x n linhas em vez de 2x1.
- Conjunto de cada célula de esta tabela externa a ser alinhada verticalmente com o meio (isto é o padrão em todos os navegadores).
- Coloque uma tabela separada dentro de cada célula. Na mesma linha, as tabelas irá alinhar no meio.
Não há realmente qualquer CSS (ou seja, não-tabela) soluções que eu posso pensar que o trabalho cross-browser. Você pode usar inline-block mas há ressalvas.
Se bem entendi, você quer que as linhas de duas tabelas para se adaptar a altura da mais alta linha dos dois para cada linha da tabela.
Eu acho que as duas únicas maneiras de fazer isso são:
- Uso JavaScript para calcular cada altura da linha para cada tabela e libertá-los para o mais alto (mais elevado de uma linha, mais alta da linha 2, etc.).
- Mesclar as duas tabelas em uma (melhor, fundir todos os três).
O segundo é obviamente o caminho a percorrer, mas o primeiro deve também trabalho, se ambas as tabelas têm sempre o mesmo número de linhas (mas você precisa que de qualquer maneira) e você não pode mudar muito do html.
Além de que eu não acho que há uma solução html / css.
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
