Синхронизация ширины столбцов между таблицами в двух разных кадрах и т.д.


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

Теперь есть несколько очевидных предложений, которые пока не работают.

Во-первых, я слышал, что с помощью CSS есть способ поместить полосу прокрутки только в строки таблицы, а не в заголовок таблицы, что является предполагаемым эффектом здесь. К сожалению, это не является жизнеспособным вариантом из-за причин, упомянутых выше.

Во-вторых, форматирование ширины в процентах по столбцам. К сожалению, полоса прокрутки испортит это, и это решение также столкнется с проблемой следующего возможного решения: форматирование ширины пикселей. Здесь, если содержимое столбца является более широким, эти ширины (px или%) будут переопределены в одной таблице, а не другой, а одна несоответствующая ширина будет разорвать -all- вертикальные выравнивания. Очевидно, исправление этого с помощью CSS max-width не работает.

Конечное возможное решение - использовать какой-то Javascript и DOM для динамического устранения проблемы. Здесь было бы достаточно заставить минимальную ширину на каждом столбце и заставить ширину нижнего слоя перекрывать верхние ширины. Тем не менее, способность фактически разбивать таблицу на две части, имея при этом одну и ту же модель столбца/строки, будет довольно опрятной. Надеемся, что это решение выполнимо и не является чрезвычайно сложным (извините мое нынешнее отсутствие знаний RE Javascript/DOM).

Спасибо,

Сколем

<!-- In frame 1 (top, non-scrolling): -->
<table id="t1" ...> (Just the header, really)
  <tr> 
    <td>Name</td><td>User Image</td><td>Email</td><td>Favorite Language</td>
  </tr>
</table>

<!-- In frame 2 (bottom, scrolling): -->
<!-- table "t2" intended to have equal column widths -->
<table id="t2" ...> (Data below the header)
  <tr>
   <!-- Lots of crazy stuff of wildly varying widths -->
   <td>...</td><td>...</td><td>...</td><td>...</td>
  </tr>
</table>

ОТВЕТЫ

Ответ 1

Сначала установите ширину t1 в ширину t2. Затем возьмем каждый td из t1 и установите его ширину, соответствующую ширине столбцов t2.

Попробуйте это доказательство концепции: http://jsfiddle.net/HqpGp/.

Вам понадобится jQuery и изменить его для работы с фреймами, но я думаю, что это хороший старт. Я уверен, что JS-часть может быть написана лучше, тем не менее.

Надеюсь, что это поможет!

Ответ 2

Я не мог заставить принятый ответ работать напрямую, поэтому я немного переработал его, на всякий случай, он не работает ни для кого другого.

$('.table1 tr:eq(1) td').each(function (i) {
                var _this = $(this);
                $('.table2 tr:eq(1) td:eq(' + i + ')').width(_this.width());
            });