Question

我已经尝试了一段时间，但我似乎找不到解决办法 HTML：

<table>
    <tr>
        <td>
            <div>this div has to expand over the td padding</div>
        </td>
    </tr>
</table>

CSS：

table {
    height:100%;
}

td {
    height:100%;
    background: green;
    padding:5px;
}

div {
    min-width:100%;
    height:100%;
    background:yellow;
    float:left;
    white-space:nowrap;
}

我希望div与td完全一样扩展，但也要扩展td填充。

将填充移动到div元素不是解决方案，因为div必须是100％高度和至少100％宽度，div的宽度的其余部分是溢出的：隐藏并且在悬停时出现但是我试图保持示例尽可能简单，所以我没有在这里包含。

编辑：

@codehorse我已经尝试过你的方法，但现在看来div扩展了全身，所以我猜Era是对的，相对定位可能不适用于td。我可以在td和div之间使用另一个包装器，但如果可能的话我想避免使用它。我正在寻找一个标准的解决方案。

@Era完美谢谢你！

Answer 1

虽然这不是正确的方法但是如果它适用于你，那么将这个CSS用于div：

 div {
    margin: -5px;
    padding: 5px;
    position: relative;
    }

Answer 2

div {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

td {
    position: relative;
}

Answer 3

如果您的表结构不是太复杂，我建议您使用display:table来实现您的目的......这样，您将避免position属性，否则会与布局有时会造成很大的混乱。

此外，由于您有css tables !!

，因此最近不建议使用html表格

here is a demo

<强> HTML

<div class="table">
    <div class="td">
        <div class="inner">this div has to expand over the td padding</div>
    </div>
</div>

<强> CSS

.table {
    height:100%;
    display:table;
}
.td {
    height:100%;
    background: green;
    padding:5px;
    display:table-cell;
}
div.inner {
    min-width:100%;
    margin:-2px; /* change this to suit your need */
    background:yellow;
    float:left;
    white-space:nowrap;
}

将子项扩展为父级填充

3 个答案: