Копирование ширины ячеек в таблицу клонов с фиксированным положением

Question

Обобщая код в этом SO-ответе , я создал небольшой плагин jQuery, который упрощает настройку заголовка прокрутки для любой таблицы - то есть, когда вы прокручиваетечто заголовок таблицы обычно находится за пределами видимого окна, клон заголовка становится фиксированным в верхней части окна, чтобы вы могли видеть, какие столбцы какие.Это все работает нормально, но у меня проблема в том, что я не могу добиться того, чтобы ширина столбцов идеально соответствовала таблице клонов и исходной таблице.

Я создал jsFiddle, который демонстрируетпроблема здесь .Суть в том, что я использую следующий цикл для копирования ширины ячеек из родительской таблицы в таблицу клонов:

$("#tbl1").find('tr').first().children().each(function(i, e)
{
    $($("#tbl1_clone").find('tr').children()[i]).width($(e).width());
});

Это необходимо, потому что таблица клонов состоит только из заголовка родительской таблицы;у него нет содержимого, поэтому ширина этого столбца будет отличаться от ширины родительской таблицы без этого шага.Однако этот цикл работает не совсем правильно.Ширина ячеек в клонированной таблице всегда отключена на несколько пикселей.Это происходит как в IE8, так и в Chrome (и, вероятно, в других, хотя я их не проверял).

Я совершенно не знаю, как исправить эту проблему.Пожалуйста, ознакомьтесь с jsFiddle , так как он объясняет проблему намного лучше, чем я.

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

Answer 1

По какой-то причине атрибут width в вашей клонированной таблице отбрасывает вычисления. Я не совсем уверен, почему, но если вы используете:

$("#tbl1_clone").removeAttr('style');

в конце вашего кода jquery, например, here, похоже, работает.

Answer 2

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

Мне потребовалось около недели, чтобы понять, что переключениеот получения Element.offsetWidth() до получения Element.getBoundingClientRect().width полностью исправил мою проблему.

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

Видимо Element.getBoundingClientRect().width получит ширину в ближайшую дробь, тогда как Element.offsetWidth() округлит его до ближайшего целого числа.

Вы можете просмотреть этот ответ для получения дополнительной информации (они объяснят это лучше, чем я могу прямо сейчас): Как получить элемент HTMLфактическая ширина и высота?

Answer 3

Попробуйте использовать offsetWidth, что-то вроде ...

    // make each cell width in the header table, the same width as
    // the cells in the orginal table (header table has one row)  
    $headerTable.find('td, th').each(function(index)
    {
        var width = originalTable.rows[0].cells[index].offsetWidth
        this.width = width;
    });