Блог

Я пытаюсь точно получить ширину <td> элемента. Результаты соответствуют моим ожиданиям в FF4, но в IE9 / Safari 5 результат, который я получаю, отклонен на 1 пиксель. Это сводит меня с ума.

Обновить:

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

Вот простой пример:http://jsfiddle.net/XwNEj/16 /

Работает только в FF4 : (Я был бы очень признателен за любую помощь в получении этой работы во всех современных браузерах.

Для фиксированных заголовков таблиц смотрите этот пост или попробуйте это для чистого css-решения.

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

• Используйте .outerWidth() и сравните с .width()
• Добавьте display:block; в свой CSS для th,td и сравните ширину с отображением ячеек таблицы по умолчанию.

Я думаю, вы поймете, что я имею в виду. Это также задокументировано на http://blog.anofsinger.com/2008/03/table-cell-box-model.html .

Если вы посмотрите пример http://codepen.io/morewry/pen/pqGhv здесь мое намерение состоит в том, чтобы показать, что внутренняя ширина ячейки таблицы не будет такой же, как внутренняя ширина a div , даже если заданы оба width:200px .

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

(По крайней мере, это то, что я ожидал.) Я бы ожидал этого:

• Вы устанавливаете ширину ячейки таблицы, скажем, в 200 пикселей.
• Firefox может возвращать ширину 199, а IE — ширину 201. Эти значения ширины точны и отражают модель ячейки таблицы каждого браузера.
• Если вы установите ту же ширину для th , он будет отображаться с той же шириной, что и td , при условии, что он имеет ту же ширину границ и отступов.

Но, просмотрев пример еще раз сегодня, я увидел, что, либо автоматически устанавливая одинаковую ширину для каждого из них, th как для соответствующего td , с помощью JavaScript, либо устанавливая щедрую равную ширину для обоих с помощью CSS, th иногда получалась ширина, отличная от td в том же браузере. (У меня есть какие-то невнятные мысли по этому поводу, но достаточно сказать, что это действительно интересно, когда это несоответствие появляется [и исчезает]. Я сравнил его, устанавливая width против min-width width:100% против предоставления, для всей таблицы и т.д.)

Я так понимаю, ваша цель — фиксированный заголовок таблицы. Для этого, я чувствую, что гораздо лучше сделать так, как показал Майк, и сохранить все это в одной таблице, используя thead и tbody. Вы нарушаете «семантику», используя две разные таблицы — th больше не имеет никакой связи с td , кроме визуальной.

• Однако вы могли бы использовать JavaScript примерно так (это работает, по крайней мере, во всех моих браузерах и может быть лучше, чем обнаружение браузером): http://codepen.io/morewry/pen/toCqs
• Подобное использование разметки / CSS также устранило проблему для меняhttp://codepen.io/morewry/pen/gjELD без JavaScript. Не уверен, работает ли это везде (например, у меня нет IE9) или его можно использовать в нужном вам контексте.

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

Добавление 1px к ширине браузеров, отличных от mozilla, похоже, работает. if(!$.browser.mozilla) { w ; }

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

Еще лучше, почему CSS не поддерживает концепцию таблицы с фиксированным заголовком ?!?!