Строка таблицы не содержит элементов с положением: абсолютное

У меня есть таблица вроде этого:

<table cellspacing="0">
    <tr>
        <td>Row 1</td>
        <td><button>Button 1</button></td>
    </tr>
    <tr>
        <td>Row 2</td>
        <td><button>Button 2</button></td>
    </tr>
    <tr>
        <td>Row 3</td>
        <td><button>Button 3</button></td>
    </tr>
</table>

Я хотел абсолютно поместить каждую кнопку в верхнем правом углу строки таблицы, поэтому я использовал этот CSS, ожидая, что <tr> будет содержать <button>:

tr {
    position:relative;
}
button {
   position:absolute;
   top:0;
   right:0;   
}

Однако все кнопки расположены друг на друга в одном месте. Обычно он работает нормально, используя <div> s, за исключением того, что при использовании display:table-row, который я обнаружил во время тестирования, он будет вести себя так же, и стал для меня неожиданностью.

Демо: http://jsfiddle.net/QU2zT/1/

Примечание. Моя фактическая разметка более сложна, и элемент, который я пытаюсь установить, может появляться где угодно в любой ячейке таблицы в этой строке, поэтому я считаю, что мне нужно position:absolute.

Почему это происходит?
Как я могу обойти это с помощью CSS без изменения разметки?

РЕДАКТИРОВАТЬ. Результаты в Firefox отличаются друг от друга, чем в Chrome и IE9 (не проверялись выше). FF является полным сбоем, в то время как другие браузеры не могут содержать настройки "divs with table display", которые отображаются в демонстрации .

Ответы

Ответ 1

По-видимому, единственным чистым решением для CSS является установка display:block на tr (включая неявно с использованием float). Однако это сильно нарушает табличные макеты и не очень хорошо работает для меня.

Я решил укусить пулю и обернуть содержимое ячейки в div, как это предложено в этих ответах:

<tr>
    <td>
        <div style="position:relative">
            <button style="position:absolute"></button>
        </div>
    </td>
</tr>

Это все еще имеет недостаток: поскольку наш элемент position:relative должен находиться внутри ячейки таблицы, он работает только в последней ячейке строки таблицы (когда целью является наличие абсолютного элемента, расположенного относительно всей строки, в верхнем правом углу). Это также, похоже, не правильно позиционирует элемент, как показано здесь: http://jsfiddle.net/QU2zT/25/

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

Ответ 2

Для цитаты из spec:

Эффект "position: relative" для группы table-row, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell и table Элементы записи undefined.

EDIT:

Единственное решение, которое я вижу, связано с использованием :last-child (то есть без IE < 9) и старых добрых vertical-align и text-align:

td:last-child {
    vertical-align: top;
    text-align: right;
    padding: 0;
    margin: 0;
}

Здесь приведена рабочая демонстрация: http://jsfiddle.net/QU2zT/15/

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

PS: Я не смотрел (и не прокомментировал) решение с помощью div, поскольку я не вижу смысла писать такую разметку, чтобы получить table, когда ее уже нет. Это будет только кошмар для обслуживания.

Ответ 3

http://jsfiddle.net/QU2zT/23/

table, tr, td{
    width: 100%;
}
tr {
 background:#cde;
 float: left;
 clear: both;
}

Ответ 4

Это комментарий для принятого ответа выше. Как насчет использования

button {
 position:absolute;
 top:auto;
 right:20px;   
}

http://jsfiddle.net/QU2zT/192/