Странное расположение таблиц: исправлено;«ошибка» в WebKit - PullRequest
Новая
       18

Странное расположение таблиц: исправлено;«ошибка» в WebKit

2 голосов
/ 15 сентября 2010

Я создаю компонент сетки для собственных нужд с сортируемыми столбцами, строками и т. Д. Существующие из них либо не соответствовали моим потребностям, либо были слишком тяжелыми. Я только начал работать с изменяемым размером столбцов, когда неожиданно WebKit поразил меня необъяснимой аномалией. В то время как макет таблицы: исправлено, отлично работало во всех других браузерах (даже IE) Safari / Chrome доставлял мне головную боль.

Вот что я написал до сих пор: TSort Embriyo

Как вы видите, он создает две таблицы - одну для заголовков и одну для тела и несколько оберток вокруг них. Затем он пытается использовать table-layout: fixed , поскольку он лучше соответствует концепции динамической сетки. Для макет таблицы: фиксированный важно, чтобы таблица имела ширину, в дополнение к этому все мои ячейки (td / th) имеют переполнение : скрыто , white- пробел: nowrap и переполнение текста: многоточие , чтобы лучше имитировать вид сетки.

Теперь «ошибка» - обе таблицы построены одинаково, ширина ячеек и таблицы рассчитывается и задается одной и той же функцией. «Ошибка» необъяснима, потому что подход, который я использую, работает, как и ожидалось, для верхней таблицы, но не для нижней. В основном это действует так, как будто у меня нет назначенной ему ширины. Но вы можете видеть в Web Inspector, что он определенно имеет ширину ... Так что ... ага?

Я попробовал все, я поменял местами функции, я удалил верхнюю таблицу, я попытался построить нижнюю таблицу так, как я строил верхнюю таблицу. Но это продолжает терпеть неудачу. Однако когда я копирую / вставляю сгенерированный табличный код в страницу напрямую, он начинает работать. Так что я предполагаю, что у этого есть что-то с динамическим характером стола. Но почему тогда он работает на верхнем столе?

Мне удалось избавиться от этой «ошибки», создав элемент таблицы с заранее заданной шириной. Но это не объясняет странное поведение, не так ли?

1 Ответ

2 голосов
/ 15 сентября 2010

Я нашел исправление - все еще не уверен, что именно происходит.

Move: 

self._addColElements(self.bd);

в конец вашей construct функции (и, конечно, уберите ее из populate).

Возможно, вы заметили, что в моем предыдущем тесте я добавил опцию 'data'. Я обнаружил, что вызов populate из _init с этими данными работал нормально - если только я не использовал setTimeout для задержки вызова - как это делает ajax get - и затем это слишком исказило таблицу. Так что это связано со временем - возможно, WebKit делает что-то интересное для оптимизации рендеринга.

EDIT

Хорошо, у меня есть теория;)

Когда таблица создается и все строки добавляются в одну и ту же функцию, css применяется в конце вызова функции - и в этот момент элемент table-layout:fixed будет применяться только в том случае, если таблица имеет ширину.

Если таблица создана и к ней применена css (т. Е. Поскольку управление вернулось в браузер с помощью, например, ajax или setTimeout), когда она не имеет ширины, то фиксированный макет не действует , Последующее добавление элементов и даже установка ширины не приводит к повторной оценке CSS.

...