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

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

0 голосов
/ 18 февраля 2012

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

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

JQuery (DOM в целом), по-видимому, не предоставляет способа вернуть желаемую минимальную ширину контейнера, как это делает большинство других сред пользовательского интерфейса (ах, HTML, как я тебя люблю, нет) Если бы у меня была эта способность, я бы сам выложил колонны. Не было бы так сложно.

Есть идеи?

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

<table>
  <tr><td>Col1</td><td>Col2</td><td>Col3</td><td>Col4</td></tr>
  <tr><td>Col1</td><td>Col2</td><td>Col3</td><td>Col4</td></tr>
</table>
<table>
  <tr><td>Col1</td><td>Col2</td><td>Col3</td><td>Col4</td></tr>
  <tr><td>Col1</td><td>Col2</td><td>Col3</td><td>Col4</td></tr>
</table>

1 Ответ

2 голосов
/ 23 января 2014

Я написал функцию для установки ширины всех столбцов таблицы равной самой широкой версии столбца в любой таблице. 

function AlignMultipleTables(class_name)
{
    // Align tables with the specified class so that all columns line up across tables.

    // Find the max width of each column across all tables. Only look at 'th' or 'td' cells in the first row of each table.
    var col_widths = [];
    $("." + class_name).each(function(index, element) {
        $(element).find("tr:first th, tr:first td").each(function(index2, element2) {
            col_widths[index2] = Math.max(col_widths[index2] || 0, $(element2).width());
        });
    });

    // Set each column in each table to the max width of that column across all tables.
    $("." + class_name).each(function(index, element) {
        $(element).find("tr:first th, tr:first td").each(function(index2, element2) {
            $(element2).width(col_widths[index2]);
        });
    });
}

Дайте всем таблицам класс чего-то вроде "align-to-widest" и затем вызовите функцию следующим образом: 

AlignMultipleTables("align-to-widest");

Смотрите мой jsfiddle здесь.

...