Td {position: relative; } переполняет границу таблицы

HTML

<table>
    <tr>
        <td>stuff</td>
        <td class="right">more stuff</td>
    </tr>
</table>

CSS

table
{
    border:10px solid green;
}
td
{
    padding:20px;
    background-color:gray;
}
.right
{
    position:relative;
}

имеет сплошную непрерывную зеленую рамку для Chrome 13, Safari 5, IE7 но приводит к этому для IE9, IE8, FF5, FF4, FF3.6

Как я могу получить сплошную границу на всем пути, но все еще есть position:relative в правой ячейке?

Ответ 1

Применить z-index: -1;

jsfiddle: http://jsfiddle.net/thilakar/L83y3/1/

.right
{
    position:relative;
    z-index:-1
}

Ответ 2

Фоновая обрезка просто сделала трюк. Просто примените "background-clip: padding-box;" к th, и он работает.

в соответствии с документами: https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip.

"Никакой фон не вырисовывается под границей (фон распространяется на внешний край прокладки).

Ответ 3

Вы не можете достоверно изменить position ячейки таблицы, некоторые браузеры (по крайней мере, старые версии Safari, последняя, похоже, исправили эту проблему) заставят ячейки таблицы (и строки) на position: static no что вы говорите.

Если вам нужно полностью позиционировать что-то внутри ячейки таблицы, вам нужно будет разместить относительно ячейки <div> (или другой элемент блока) внутри ячейки, а затем поместить в нее все остальное:

<table>
    <tr>
        <td>stuff</td>
        <td><div class="right">more stuff</div></td>
    </tr>
</table>

И затем настройте CSS:

.right {
    position:relative;
    width: 100%;
    height: 100%;
}

И обязательный живой пример: http://jsfiddle.net/ambiguous/KUshG/

Я подозреваю, что заботится о проблеме, которую вы видите, и устраняет некоторые проблемы, которые вы еще не видели.

Ответ 4

Не используйте позицию в ячейках таблицы.

Просто оберните содержимое ячеек в относительный div:

<table>
    <tr>
        <td>stuff</td>
        <td class="right">
            <div style="position:relative;">more stuff</div>
        </td>
    </tr>
</table>