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

StackOverflow https://stackoverflow.com/questions/860671

Вопрос

Я унаследовал некоторый 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. Клиент указал "no javascript" в сервлетах.Это жесткое ограничение.

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

Это было полезно?

Решение

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

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

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

<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, но, поскольку вы сказали, что унаследовали код, я понимаю, что небольшой рефакторинг - это не вариант.

Другие советы

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

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

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

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

Я думаю, что единственными двумя способами сделать это являются:

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top