Использование относительной / абсолютной позиции в TD?

108

У меня такой код:

<td style="position: relative; min-height: 60px; vertical-align: top;">
    Contents of table cell, variable height, could be more than 60px;

    <div style="position: absolute; bottom: 0px;">
        Notice
    </div>
</td>

Это вообще не работает. По какой-то причине команда position: relative не читается в TD, а уведомление DIV размещается за пределами контейнера содержимого внизу моей страницы. Я попытался поместить все содержимое TD в DIV, например:

<td>
    <div style="position: relative; min-height: 60px; vertical-align: top;">
        Contents of table cell, variable height, could be more than 60px;

        <div style="position: absolute; bottom: 0px;">
            Notice
        </div>
    </div>
</td>

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

html position html-table

— Джейсон Аксельрод
источник

Есть ли причина пользоваться таблицей? Я предполагаю, что остальная часть содержимого таблицы изменит содержимое этой ячейки. Если таблица необходима, вы можете использовать две строки сверху с valign = top и снизу с valign = bottom

— Уэйн

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

— Кайл

5

Это для календаря ... поэтому сетка таблицы необходима: 8wayrun.com/events/monthly/1.2011

— Джейсон Аксельрод,

189

Это связано с тем, что в соответствии с CSS 2.1 влияние position: relativeна элементы таблицы не определено. Иллюстративно это position: relativeимеет желаемый эффект в Chrome 13, но не в Firefox 4. Ваше решение здесь - добавить divвокруг вашего контента и поместить position: relativeна divнего вместо td. Следующее иллюстрирует результаты, которые вы получаете с position: relative(1) для divхорошего), (2) для td(плохого) и, наконец, (3) для divвнутреннего td(снова хорошо).

В Firefox 4

<table>
  <tr>
    <td>
      <div style="position:relative;">
        <span style="position:absolute; left:150px;">
          Absolute span
        </span>
        Relative div
      </div>
    </td>
  </tr>
</table>

Развернуть фрагмент

— Avernet
источник

29

Высота div не будет равна 100%, поэтому относительное позиционирование вниз: 0 не имеет никакого эффекта.

— Softlion

1

Обратите внимание, что «Абсолютный диапазон» в этом примере не повлияет на высоту td, что делает использование таблицы бесполезным.

— Dror

@Softlion: Как насчет того, чтобы обернуть все содержимое tdвнутри a div, установить width: 100%и height: 100%, применить любые отступы от td к div и установить его relative? Идея состоит в том, чтобы создать тонкий содержащий слой чуть выше td, который действует как tdсам, но это div. У меня это сработало.

— CamilB

1

Ссылка на источник HTML мертва. Не могли бы вы обновить / обновить его?

— Питер ВАРГА

1

Для тех, кто нашел этот ответ в 2019 году или позже: хотя CSS2.1 действительно сказал, что влияние position:relativeна внутренние части таблицы было неопределенным, это означало поведение самих частей таблицы (например, было неясно, как должны tdвести себя границы таблицы). если он смещен через position:relativeв случае border-collapse:collapse). Это не исключало их из возможных содержащих блоков абсолютно позиционированных потомков. Так что поведение Firefox оказалось просто ошибкой, которая была исправлена в 2014 году.

— Илья Стрельцын

5

Этот прием тоже подходит, но в этом случае свойства align (middle, bottom и т. Д.) Работать не будут.

<td style="display: block; position: relative;">
</td>

— Сергей Онищенко
источник

2

Содержимое ячейки таблицы переменной высоты может быть больше 60 пикселей;

<div style="position: absolute; bottom: 0px;">
    Notice
</div>

— Ксавьер Дева Арул
источник

1

Что касается вашей второй попытки, вы пробовали использовать вертикальное выравнивание? Либо

<td valign="bottom">

или с помощью css

vertical-align:bottom

— Кайл
источник

Это не сработает ... если бы я сделал это, то содержимое ячейки таблицы было бы на расстоянии 60 пикселей от низа; а не наверху.

— Джейсон Аксельрод

-2

также работает, если вы сделаете «display: block;» на тд, уничтожая тд тож, но работает!

— дайгорокуб
источник