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

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

6 голосов
/ 27 августа 2010


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

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

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

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

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

Спасибо

Skolem 

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

Ответы [ 2 ]

8 голосов
/ 27 августа 2010

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

Попробуйте это подтверждение концепции: http://jsfiddle.net/HqpGp/.

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

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

1 голос
/ 03 февраля 2015

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

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