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;
}

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

Answer 2

你试试这个css：

 .div
{
background-color: red;
padding: 0px;
}

Css＆＃34;变换：scale（）＆＃34;使元素在容器外生长

2 个答案: