Позиционирование элментов внутри элемента <th> - неверный вывод в firefox

@Зверушь · Регистрация: 01.05.2010

Студворк — интернет-сервис помощи студентам

Здравствуйте. Проблема следующего характера:
Сразу оговорюсь, что во всех браузерах работает, даже в ИЕ, не работает только в firefox почему-то.

Итак, что я делаю:
элементам <th> задаю относительное позиционирование, что бы можно было внутри этих элементов абсолютно позиционировать другие элементы. Я хочу, чтобы элементы с классом arrow расмещались в правой верхней части этих заголовочных ячеек.
Повторюсь, везде, кроме firefox работает. В firefox же абсолютно позиционируемые элементы улетают в правый верхний угол документа.
При этом происходит глюк с фоном этих заголовочных ячеек.
На скринах привожу пример, как должно быть (как работает в хроме, опере и ие) и как отображается в firefox.
Как это можно исправить. Что я делаю не так?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<table id="example1">
    <thead>
        <tr><th style="width: 200px;">
            ФИО
            <p class="arrow">up</p>
        </th>
        <th style="width: 180px;">
            Зарплата (грн)
        </th></tr>
    </thead>
    <tbody>
        <tr><td>
            Алюбитов И.Е.
        </td>
        <td>
            4000
        </td></tr>
        <tr><td>
            Алебастров В.А.
        </td>
        <td>
            16000
        </td></tr>
        <tr><td>
            Вероломов К.К.
        </td>
        <td>
            4500
        </td></tr>
        <tr><td>
            Улинов Б.Ю.
        </td>
        <td>
            3500
        </td></tr>
        <tr><td>
            Уралитов А.А.
        </td>
        <td>
            2500
        </td></tr>
        <tr><td>
            Марджинов А.К.
        </td>
        <td>
            4000
        </td></tr>
    </tbody>
</table>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
table {
    margin: 0 auto;
    border: 2px solid black;
    border-collapse: collapse;
}
th, td {
    border: 1px solid black;
    padding: 0 10px;
}
th {
    position: relative;
    background-color: #eee;
}
.arrow {
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0px;
    right: 0px;
}

@maximus2011 · 22.03.2013, 19:15

Вот мне бы тоже хотелось узнать! Буквально пару дней назад столкнулся с такой ситуацией. Решение не нашел... переделал верстку подругому.

@Зверушь · 22.03.2013, 19:24 **[ТС]**

maximus2011, а как переделали верстку? Вам удалось разместить позиционируемый элемент в этом месте, или вы вообще отказались от этого и сделали всё по-другому?

@newJS · 22.03.2013, 20:50

табличным ячейкам не рекомендуется давать position, почему не завернуть все в див и сделать все в диве?

@Зверушь · 22.03.2013, 22:38 **[ТС]**

Сообщение от newJS

табличным ячейкам не рекомендуется давать position

Почему?

Сообщение от newJS

почему не завернуть все в див и сделать все в диве?

Зачем заворачивать всё в див делать всё на диве? Это же не верстка страницы, а верстка одной из таблиц, которые могут использоваться на сайте.

Но за наводку спасибо, попробую внутри <th> создать див и уже в нем позиционировать.

Добавлено через 24 минуты
Получилось. Всунул внутрь th див и уже в нем позиционировал.
Но я считаю, что это не правильно.

@newJS · 23.03.2013, 08:00

Сообщение от Зверушь

Почему?

Вот так с ходу не соображу где читал, но кажется в спецификации. Что то типа того, что из-за этого всю таблицу может покорежить.

Сообщение от Зверушь

Но я считаю, что это не правильно.

А для меня это, не правильно, странно. Чем может быть неправильно, просто любопытен ход мыслей.

@Valiant · 23.03.2013, 09:29

Вообще не понимаю в чем проблема =) не нужно пытаться проломить ворота, когда можно их обойти, есть как минимум два решения кроссбраузерных, во-первых, обернуть содержимое th в див и задать уже ему позиционирование и выравнивать именно внутри него, как и написал newJS, а во-вторых в твоем случае можно обойтись и float:right для класса .arrow

@Зверушь · 23.03.2013, 15:34 **[ТС]**

Сообщение от newJS

Чем может быть неправильно, просто любопытен ход мыслей.

Почему я считаю, что это не правильно? Ну вот зачем пихать в th див для позиционирования, если th итак имеет область определенного размера - ширину и высоту. При позиционировании элементов внутри th, почему-то эта высота и ширина не учитывается. Причем только в лисе. Везде же работает. Вот такой ход мыслей. Может, я и ошибаюсь.

@newJS · 23.03.2013, 20:30

Сообщение от Зверушь

Ну вот зачем пихать в th див для позиционирования

ну хотя бы ради кроссбраузерности

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

Vovan-VE · 24.03.2013, 06:03

CSS 2.1: Свойство position

The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.

«Эффект от применения position:relative к блокам table-cell не определён.»

@Valiant · 24.03.2013, 11:42

Сообщение от Зверушь

Зачем заворачивать всё в див делать всё на диве? Это же не верстка страницы, а верстка одной из таблиц, которые могут использоваться на сайте.

Таблица самая кроссбраузерная вещь для всех браузеров =), тут вопрос в другом, зачем использовать веник что бы пропылесосить пол? Тебе же ничто не мешает создать еще одну ячейку, задать ей размер, поставить в нее arrow, а в последующих строках просто объединять эти ячейки =)

@Зверушь · 25.03.2013, 14:15 **[ТС]**

Сообщение от Valiant

Тебе же ничто не мешает создать еще одну ячейку, задать ей размер, поставить в нее arrow, а в последующих строках просто объединять эти ячейки =)

Немпного не понял. Можете привести пример реализации?
Зачем плодить ячейки? Тем более, что я не просто хочу сверстать таблицу, которая будет иметь определенный вид, я еще и пишу на javascripte модуль, сортирующий строки таблицы. Объединение ячеек он не предусматривает.

Впрочем, проблему я уже решил, спасибо newJS за наводку

Модуль сортировки написал, работает

@Valiant · 25.03.2013, 22:00

Либо делить ячейку на две, либо внутрь ячейки вставлять див =) один фиг на один тег больше выходит

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

@maximus2011 269 / 261 / 35 Регистрация: 21.02.2012 Сообщений: 1,078
	22.03.2013, 19:15
	Вот мне бы тоже хотелось узнать! Буквально пару дней назад столкнулся с такой ситуацией. Решение не нашел... переделал верстку подругому. 0

@Зверушь 461 / 369 / 94 Регистрация: 01.05.2010 Сообщений: 1,761
	22.03.2013, 19:24 [ТС]
	maximus2011, а как переделали верстку? Вам удалось разместить позиционируемый элемент в этом месте, или вы вообще отказались от этого и сделали всё по-другому? 0

@newJS 2436 / 1115 / 312 Регистрация: 23.06.2011 Сообщений: 3,529
	22.03.2013, 20:50
	табличным ячейкам не рекомендуется давать position, почему не завернуть все в див и сделать все в диве? 1

@Valiant 39 / 39 / 1 Регистрация: 12.02.2013 Сообщений: 177
	23.03.2013, 09:29
	Вообще не понимаю в чем проблема =) не нужно пытаться проломить ворота, когда можно их обойти, есть как минимум два решения кроссбраузерных, во-первых, обернуть содержимое th в див и задать уже ему позиционирование и выравнивать именно внутри него, как и написал newJS, а во-вторых в твоем случае можно обойтись и float:right для класса .arrow 0

@Valiant 39 / 39 / 1 Регистрация: 12.02.2013 Сообщений: 177
	25.03.2013, 22:00
	Либо делить ячейку на две, либо внутрь ячейки вставлять див =) один фиг на один тег больше выходит 0