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

У меня есть следующий код:Использование позиции Относительная/Абсолютная в TD?

<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>

Это не работает вообще. По какой-то причине позиция: относительная команда не считывается на 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 пикселей вниз, а не внизу.

источник

2010-12-30 Jason Axelrod

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

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

Его для календаря ... так важна таблица сетки: http://www.8wayrun.com/events/monthly/1.2011/ –

172

Это происходит потому, что в соответствии с 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 (снова хорошо).

On Firefox 4

Для справки, вот HTML source.

источник

2011-05-21 02:36:43 avernet

+27

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

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

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

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

<td valign="bottom">

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

vertical-align:bottom

источник

2010-12-30 17:28:34 Kyle

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

и недопустимая разметка для xthml только hmtl: P – ncubica

-1

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

источник

2012-10-10 20:38:38 daigorocub

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

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

источник

2013-01-25 04:29:17

Этот прием также подходит, но в этом случае выравнивание свойств (средний, нижний и т.д.) не будет работать.

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

источник

2013-06-12 12:12:25

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

ответ

Смежные вопросы