CODEWITHSUNDEEP
htmlcss
malkassem
malkassem

Reputation: 1957

Css "transform: scale()" makes element grow outside of container

I have the HTML and CSS Below:

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 */
}

Also, please see jsFiddle to see the output.

The question is, why does the table grow outside of the div container? This does not make sense to me. The width style attribute is set to 100%. I expect the the table to stay in the div container since I have no width limit on it.

Is there a way to make the table remain in the boundaries of the container after the transform: scale()?

Thank you

Upvotes: 1

Views: 5475

Answers (2)

rwaymouth
rwaymouth

Reputation: 76

I think your best bet here, if you need to use transform: scale(), is to apply the transform to the div. The table will inherit it, and be contained within it. Transforms create a new context for the element, which is why the div isn't growing with it.

The bigger question is, what are you hoping to see as the end result? If it's just resizing the table, the using a transform seems like a bit of overkill that introduces some complications. Wouldn't it be simpler to just do something like:

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

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

If all you're trying to do is re-size the elements, that should give you a similar result.

Upvotes: 1

Nayeem Mansoori
Nayeem Mansoori

Reputation: 831

Have you try this css:

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

Upvotes: 0

Related Questions