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

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

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

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

Во-вторых, форматирование в процентах по ширине столбцов. К сожалению, полоса прокрутки испортит это, и это решение также разделяет проблему со следующим возможным решением: форматирование ширины пикселя. Здесь, если есть содержимое столбца, которое является слишком широким, эти ширины (px или%) будут переопределены в одной таблице, но не в другой, и одно несоответствие ширины нарушит все вертикальные выравнивания. Видимо, исправить это с помощью 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>