Я написал плагин jQuery, который, помимо прочего, устанавливает ширину столбцов таблицы, используя colgroup, и позволяет изменять их размер, перетаскивая заголовки влево или вправо.Я выложил урезанную версию этого здесь .Он отлично работает в Firefox (по крайней мере, 3.6), но не работает в других браузерах, и я не понимаю, почему.
Я заметил, что когда я создаю таблицу с colgroup непосредственно в разметке, ширинахорошо, но когда я добавляю их позже, используя jQuery, это не так.Возможно, я не добавляю их там, где они должны быть, или, может быть, я неосознанно полагаюсь на устаревшее или специфичное для браузера поведение, я понятия не имею.
Изменение размера заголовков выполняется путем измененияатрибут width каждого col в ответ на перетаскивание мышью.В принципе, он работает нормально, он не имеет видимых эффектов в других браузерах из-за проблемы с colgroup (console.log показывает, что события запускаются правильно).
Любая помощь по этой проблеме будет принята с благодарностью.Предложения о том, как сделать то же самое без групп, также приветствуются!(помня, что изменение размера заголовка должно изменить ширину всех tds в столбце)
Упрощенный код:
var colgroup = $('<colgroup/>');
table.find("td,th").each(function() {
create_col($(this)).appendTo(colgroup);
});
colgroup.appendTo(table);
// Inside create_col:
var col = $('<col width="' + width + '"/>');
return col;
Полный код: jsfiddle.net / mgibsonbr / YqCsY /
PS Хотя это и не связано с проблемой, если кто-то также знает кросс-браузерный способ сделать заголовки невыбираемыми , скажите, пожалуйста, часть изменения размера будет выглядеть более "естественной" в этом смысле,Соответствующая строка в (полном) примере:
th.attr("unselectable","on").css("-moz-user-select","none")
Обновление : Очевидно, Firefox принимает colgroup, являющееся ниже tbody, но другие браузеры требуют, чтобы он был выше ...
// colgroup.appendTo(table);
colgroup.prependTo(table);
Это исправлено в Chrome и Safari, , но Opera по-прежнему не работает и Opera.