Как отформатировать несколько таблиц для вертикального выравнивания - PullRequest
Новая
       10

Как отформатировать несколько таблиц для вертикального выравнивания

2 голосов
/ 14 мая 2009

Я унаследовал некоторый 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. Он создается программой сервлета, поэтому порядок двух столбцов основан на циклах. То есть один цикл записывает первый (левый) столбец, затем другой цикл записывает второй (правый) столбец. Они не являются «смешиваемыми» циклами - они должны запускаться один за другим, строго ограничивая то, что мне разрешено делать с форматированием.

  2. Клиент указал «нет JavaScript» в сервлетах. Это жесткое ограничение.

Я могу использовать CSS, но два цикла (левый, затем правый) исправлены.

Ответы [ 3 ]

2 голосов
/ 14 мая 2009

Не совсем понятно, что вы хотите здесь, кажется, что вы хотите, чтобы строки динамически регулировали свою высоту на основе строки аналога в другом столбце. То есть первая строка с левой стороны имеет более длинный текст, чем первая строка с правой стороны, но вы хотите, чтобы обе вторые строки начинали выравниваться, оставляя некоторое свободное пространство между текстом первой строки в правом столбце и второй строкой на правильный столбец, правильно?

В таком случае, ваше решение - убрать упаковочный стол. Таблица уже основана на столбцах, поэтому вам не нужна дополнительная таблица для создания столбцов.

Попробуйте этот код: 

<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>

Нет необходимости говорить, что это ужасный и очень старый школьный способ делать то, что вы делаете, вам лучше использовать divs и css, но, как вы сказали, что вы унаследовали код, я понимаю, что немного рефакторинга не вариант.

0 голосов
/ 14 мая 2009

ОК, я думаю, я понимаю проблему, исходя из того, что сказали другие. Если вы можете изменить код самостоятельно (вы не говорите явно), то самое быстрое решение это:

  • Использовать несколько строк во внешней таблице, то есть 2 столбца x N строк вместо 2x1.
  • Установите каждую ячейку этой внешней таблицы, чтобы она была выровнена вертикально по центру (это значение по умолчанию во всех браузерах).
  • Поставьте отдельный столик внутри каждой ячейки. В той же строке таблицы будут выровнены посередине.

На самом деле не существует каких-либо CSS (то есть не табличных) решений, которые я мог бы придумать для этой кросс-браузерной работы. Вы можете использовать inline-block, но есть предостережения.

0 голосов
/ 14 мая 2009

Если я правильно понимаю, вы хотите, чтобы строки двух таблиц адаптировали высоту самой высокой строки из двух для каждой строки таблицы.

Я думаю, что есть только два способа сделать это:

  1. Используйте javascript, чтобы вычислить высоту каждой строки для каждой таблицы и установить для них самое высокое значение (самое высокое из строки 1, самое высокое из строки 2 и т. Д.).
  2. Объедините две таблицы в одну (лучше, объедините все три).

Очевидно, что вторая - это путь, но первая также должна работать, если в обеих таблицах всегда одинаковое количество строк (но это нужно в любом случае), и вы не можете изменить большую часть HTML.

Кроме того, я не думаю, что есть решение html / css.

...