Строка таблицы не будет содержать элементы с позицией: absolute

Question

У меня есть такая таблица:

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

1. Почему это происходит?
2. Как обойти это, используя CSS, без изменения разметки?

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

Answer 1

Цитировать из spec :

Влияние 'position: относительный' на группу строк таблицы, группу заголовков таблицы, группу нижнего колонтитула таблицы, строку таблицы, группу столбцов таблицы, столбец таблицы, ячейку таблицы и таблицу -caption элементы не определены.

EDIT:

Единственное решение, которое я вижу, заключается в использовании :last-child (т.е. без IE <9) и старых добрых <code>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 s, поскольку не вижу смысла в написании такой разметки для получения table, когда она уже есть. Это будет только кошмар обслуживания.

Answer 2

Используйте этот хак, поскольку относительное положение игнорируется в tr благодаря https://github.com/w3c/csswg-drafts/issues/1899

tr{
    transform: scale(1);
}
td{
   position:absolute;
   top:0;
   right:0
}

Answer 3

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

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

• https://stackoverflow.com/a/8312358/398242
• https://stackoverflow.com/a/7629567/398242

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

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

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

Answer 4

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

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