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

Question

我继承了一些 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>

编辑：进一步澄清和限制这件事。

它是由 servlet 程序创建的，因此两列的顺序是基于循环的。也就是说，一个循环写入第一（左）列，然后另一个循环写入第二（右）列。它们不是“可混合”的循环——它们必须一个接一个地运行，严重限制了我可以对格式进行的操作。
客户端已在 servlet 中指定“无 javascript”。这是一个严格的限制。

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

score 2 · Accepted Answer

不太确定您在这里想要什么，似乎您希望行根据另一列上的对应行动态调整它们的高度。即左侧的第一行的文本比右侧的第一行长，但是您希望两个第二行开始对齐，在右列的第一行的文本和第二行的文本之间留下一些空白空间在右栏中，对吗？

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

试试这个代码：

<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，但正如你所说，你继承了代码，我明白一点重构不是一种选择。

score 0 · Accepted Answer

如果我理解正确，您希望两个表格的行为表格的每一行调整两个表格中最高行的高度。

我认为唯一的两种方法是：

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

第二个显然是要走的路，但是如果两个表始终具有相同的行数（但无论如何您都需要）并且您不能更改大部分 html，第一个也应该工作。

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

score 0 · Accepted Answer

好的，我想我从其他人所说的情况中理解了这个问题。如果您能够自己更改代码（您没有明确说明），那么最快的解决方案是：

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

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

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

3 回答 3

Related

Reference