html - Css "transform: scale()"使元素在容器外生长

Question

我有下面的 HTML 和 CSS:

HTML

<div class="div">
    <table class="table">
        <tr>
            <td>column 1</td>
            <td>column 2</td>
            <td>column 3</td>
            <td>column 4</td>
        </tr>
    </table>
</div>

CSS

.div
{
    background-color: red;
    padding: 5px;
}
.table
{
    background-color: blue;
    color: white;
    width: 100%;

    -moz-transform: scale(1.5); /* Firefox */
    -moz-transform-origin: 0 0;
    -o-transform: scale(1.5); /* Opera */
    -o-transform-origin: 0 0;
    -webkit-transform: scale(1.5); /* Safari And Chrome */
    -webkit-transform-origin: 0 0;
    transform: scale(1.5); /* Standard Property */
    transform-origin: 0 0;  /* Standard Property */
}

另请参阅 jsFiddle查看输出。

问题是，为什么table会长在div容器之外？这对我来说没有意义。 width 样式属性设置为 100%。我希望表格保留在 div 容器中，因为我对它没有 width 限制。

有没有办法让表格在transform: scale()之后保持在容器的边界内？

谢谢

Answer 1

如果您需要使用 transform: scale()，我认为您最好的选择是将转换应用到 div。该表将继承它，并包含在其中。转换为元素创建了一个新的上下文，这就是 div 不随元素增长的原因。

更大的问题是，您希望看到的最终结果是什么？如果它只是调整表的大小，那么使用转换似乎有点矫枉过正，会引入一些复杂的问题。做这样的事情不是更简单吗:

.table {
    background-color: blue;
    color: white;
    width: 100%;
}

.table td {
    width: 25%;
    height: 2.5em;
    font-size: 1.5em;
}

如果您要做的只是调整元素的大小，那应该会给您类似的结果。