如何格式化多个表以进行垂直对齐

时间：2009-05-13 22:05:32

标签： html html-table vertical-alignment

我继承了一些HTML代码，并且已经要求对齐这两个表，以便文本在两列之间排列。

有一个外表，为这个东西提供两列外观，然后是两个内部表（每列一个）。每个内部表包含保存文本的框。客户希望在两列之间对齐这些文本框。

我可以想到一些方法可以使两行中的文本行“匹配”，但没有任何简单或优雅。

这是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%">
                &nbsp;
                </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%">
                &nbsp;
                </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%">
                &nbsp;
                </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%">
                &nbsp;
                </td>
                <td width="90%">
                <hr align="left" />
                </td>
            </tr>
        </table>
    </td>
    </tr>
    </table>
</body>
</html>

编辑：对此事进一步澄清和限制。

  1. 它是由servlet程序创建的，因此两列的排序是基于循环的。也就是说，一个循环写入第一个（左）列，然后另一个循环写入第二个（右）列。它们不是“可混合的”循环 - 它们必须一个接一个地运行，严重限制了我允许对格式化做的事情。

  2. 客户端在servlet中指定了“no javascript”。这是一个坚定的限制。

    3. 我可以使用CSS，但是两个循环（左边，然后右边）是固定的。

3 个答案:

答案 0 :(得分：2)

不太确定要了解您想要的内容，似乎您希望行根据其他列上的对应行动态调整其高度。即左侧的第一行文本比右侧的第一行长，但您希望第二行开始对齐，在右列的第一行和第二行的文本之间留一些空格右栏，对吗？

如果是这种情况，您的解决方案是删除包装表。表已经基于列，因此您不需要额外的表来创建列。

试试这段代码：

<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%">&nbsp;</td>
          <td width="45%">
             <hr align="left" />
          </td>
          <td width="5%"> &nbsp; </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%">&nbsp;</td>
       <td width="45%">
           <hr align="left" />
      </td>
      <td width="5%">&nbsp;</td>
      <td width="45%">
        <hr align="left" />
      </td>
   </tr>
  </table>
</body>
</html>

没必要说这是一种可怕的，非常古老的学校方式来做你正在做的事情，你最好使用div和css，但正如你所说，你继承了代码，我理解一点点重构不是一个选项。

答案 1 :(得分：0)

如果我理解正确，你希望两个表的行适应表中每一行的最高行的高度。

我认为只有两种方法可以做到：

  1. 使用javascript计算每个表的每个行高，并将它们设置为最高（第1行的最高位，第2行的最高位等）。
  2. 将两个表合并为一个（更好，合并所有三个）。

    3. 第二个显然是要走的路，但是如果两个表总是具有相同的行数（但无论如何你都需要它），第一个也应该有用，并且你不能改变很多html。

    除此之外，我认为没有html / css解决方案。

答案 2 :(得分：0)

好吧，我认为我从其他人所说的那样理解这个问题。如果您能够自己更改代码（您没有明确说出），那么最快的解决方案就是：

  • 在外表上使用多行，即2列x N行而不是2x1。
  • 将此外表的每个单元格设置为垂直于中间对齐（这是所有浏览器中的默认值）。
  • 在每个单元格内放置一个单独的表格。在同一行中，表格将在中间对齐。

我认为没有任何CSS（即非表）解决方案可以跨浏览器工作。您可以使用inline-block，但有一些警告。

相关问题
最新问题