Сделать 2 таблицы с одинаковыми размерами столбцов

Question

У меня есть 2 HTML-таблицы, которые находятся друг над другом. Каждая таблица имеет одинаковое количество столбцов, но текст, который они содержат, может отличаться. И каждая таблица может содержать много строк. Я хотел бы, чтобы эти 2 таблицы имели одинаковую ширину столбцов, чтобы столбцы всегда выстраивались в ряд. Я не возражаю, если текст в столбцах оборачивается столько, сколько необходимо. И я не могу объединить все строки в одну таблицу по другим причинам.

Есть ли способ сделать это?

Обратите внимание, что это решение должно работать только в Firefox и двух последних версиях IE.

Answer 1

Я предлагаю использовать процентную ширину в ваших столбцах, чтобы эта ширина всегда составляла до 100%.

<style type="text/css">
  table { width: 100%; }
  td.colA { width: 30%; }
  td.colB { width: 70%; }
</style>

<table>
  <tr>
   <td class="colA">Lorem ipsum</td>
   <td class="colB">Lorem ipsum</td>
  </tr>
</table>

<table>
  <tr>
   <td class="colA">Lorem ipsum</td>
   <td class="colB">Lorem ipsum</td>
  </tr>
</table>

Answer 2

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

Вы можете создать одну таблицу и использовать css, чтобы она выглядела как две.

<table>
  <tr> <!-- First table header --> </tr>
  <tr> <!-- First table rows... --></tr>
  <tr> <!-- First table footer... --></tr>
  <tr> <!-- Empty space between tables --> </tr>
  <tr> <!-- Second table header --> </tr>
  <tr> <!-- Second table rows... --></tr>
  <tr> <!-- Second table footer... --></tr>
</table>

Answer 3

У меня исправлена ​​аналогичная ситуация для моего сайта в IE 9, Chrome 14 и FireFox 8 со следующими Моя таблица содержит четыре столбца, нечетные содержат метки и даже содержат входные данные. У меня есть четыре таблицы на моей странице, и все столбцы каждой таблицы выровнены по вертикали. Надеюсь, что эти шаги помогут

1 - Загрузите прозрачное изображение из любого места, возможно, размером 1x1, чтобы вы могли отрегулировать его размер в соответствии с вашими потребностями (не уверен, что изображение также может быть уменьшено с помощью CSS)

2- Определите ваш стол как

    <table class="formed">
            <tr>
                <th class="colLabel"></th>
                <th class="colField"></th>
                <th class="colLabel"></th>
                <th class="colField"></th>
            </tr>
        <tr>
            <td></td>
[now rest of your columns row by row]

3- Определите ваш CSS как

.colLabel
{
    text-align:right;
    padding-right:0em;
    height:auto;
    background-image:url(Resources/Images/transparent.gif);
    background-repeat:no-repeat;
    width:8em;
}
.colField
{
    text-align:left;
    padding-right:0em;
    height:auto;
    background-image:url(Resources/Images/transparent.gif);
    background-repeat:no-repeat;
    width:20em; 
}

.formed
{
    width:90%;
    table-layout:fixed;
    padding:0;
    margin:0;
}

Answer 4

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

Конечно, вы можете использовать javascript, чтобы найти самую широкую таблицу, получить ширину ее столбцов и использовать эти значения для таблицы меньшего размера, но решение, предложенное belugabob в качестве комментария к вашему вопросу, гораздо лучше.