How can I fully control a rotation

How can I fully control the rotation of a div using CSS?

I've been struggling with this for a while now, but nothing seems to work properly. I'm using this for a document that needs to be as concise as possible and every time that I need to rotate a div inside a table cell, the width of that cell becomes uncontrollable, linked to the length of the word written inside.

Right now I'm using the code below, even though I've been trying to use other methods.

My aim is to reduce the width of the left cell and make it more suited to the font, freeing space.

Screenshot

My CSS:

.rotate {

    -webkit-transform: rotate(270deg);

    -moz-transform: rotate(270deg);

    writing-mode: lr-tb;

}

And my HTML:

<table class="TABELLA1" width="400px" align="left">

    <tr height="90px">

        <td width="1%">

            <p id="idcliente" class="A8BL rotate">C</p>

        </td>

        <td width="99%">

            <div>

                <div class="A8BL">

                    FACTORY 1<br>

                    253190 MILANO (IT)<br>

                </div>

                <div class="A8L">

                    Tel. 02 669172284<br>

                    e-mail: info@alufaoj.it

                    Cod. Fisc. <br>

                    e Partita IVA 2251364245341126

                </div>

            </div>

        </td>

    </tr>

</table>

edited Nov 19 '18 at 16:30

Brian Tompsett - 汤莱恩

4,2231338101

asked Nov 19 '18 at 15:01

L.BB

132

add a comment |

How can I fully control the rotation of a div using CSS?

Right now I'm using the code below, even though I've been trying to use other methods.

My aim is to reduce the width of the left cell and make it more suited to the font, freeing space.

Screenshot

My CSS:

.rotate {

    -webkit-transform: rotate(270deg);

    -moz-transform: rotate(270deg);

    writing-mode: lr-tb;

}

And my HTML:

<table class="TABELLA1" width="400px" align="left">

    <tr height="90px">

        <td width="1%">

            <p id="idcliente" class="A8BL rotate">C</p>

        </td>

        <td width="99%">

            <div>

                <div class="A8BL">

                    FACTORY 1<br>

                    253190 MILANO (IT)<br>

                </div>

                <div class="A8L">

                    Tel. 02 669172284<br>

                    e-mail: info@alufaoj.it

                    Cod. Fisc. <br>

                    e Partita IVA 2251364245341126

                </div>

            </div>

        </td>

    </tr>

</table>

edited Nov 19 '18 at 16:30

Brian Tompsett - 汤莱恩

4,2231338101

asked Nov 19 '18 at 15:01

L.BB

132

add a comment |

How can I fully control the rotation of a div using CSS?

Right now I'm using the code below, even though I've been trying to use other methods.

My aim is to reduce the width of the left cell and make it more suited to the font, freeing space.

Screenshot

My CSS:

.rotate {

    -webkit-transform: rotate(270deg);

    -moz-transform: rotate(270deg);

    writing-mode: lr-tb;

}

And my HTML:

<table class="TABELLA1" width="400px" align="left">

    <tr height="90px">

        <td width="1%">

            <p id="idcliente" class="A8BL rotate">C</p>

        </td>

        <td width="99%">

            <div>

                <div class="A8BL">

                    FACTORY 1<br>

                    253190 MILANO (IT)<br>

                </div>

                <div class="A8L">

                    Tel. 02 669172284<br>

                    e-mail: info@alufaoj.it

                    Cod. Fisc. <br>

                    e Partita IVA 2251364245341126

                </div>

            </div>

        </td>

    </tr>

</table>

edited Nov 19 '18 at 16:30

Brian Tompsett - 汤莱恩

4,2231338101

asked Nov 19 '18 at 15:01

L.BB

132

How can I fully control the rotation of a div using CSS?

Right now I'm using the code below, even though I've been trying to use other methods.

My aim is to reduce the width of the left cell and make it more suited to the font, freeing space.

Screenshot

My CSS:

.rotate {

    -webkit-transform: rotate(270deg);

    -moz-transform: rotate(270deg);

    writing-mode: lr-tb;

}

And my HTML:

<table class="TABELLA1" width="400px" align="left">

    <tr height="90px">

        <td width="1%">

            <p id="idcliente" class="A8BL rotate">C</p>

        </td>

        <td width="99%">

            <div>

                <div class="A8BL">

                    FACTORY 1<br>

                    253190 MILANO (IT)<br>

                </div>

                <div class="A8L">

                    Tel. 02 669172284<br>

                    e-mail: info@alufaoj.it

                    Cod. Fisc. <br>

                    e Partita IVA 2251364245341126

                </div>

            </div>

        </td>

    </tr>

</table>

<table class="TABELLA1" width="400px" align="left">

    <tr height="90px">

        <td width="1%">

            <p id="idcliente" class="A8BL rotate">C</p>

        </td>

        <td width="99%">

            <div>

                <div class="A8BL">

                    FACTORY 1<br>

                    253190 MILANO (IT)<br>

                </div>

                <div class="A8L">

                    Tel. 02 669172284<br>

                    e-mail: info@alufaoj.it

                    Cod. Fisc. <br>

                    e Partita IVA 2251364245341126

                </div>

            </div>

        </td>

    </tr>

</table>

<table class="TABELLA1" width="400px" align="left">

    <tr height="90px">

        <td width="1%">

            <p id="idcliente" class="A8BL rotate">C</p>

        </td>

        <td width="99%">

            <div>

                <div class="A8BL">

                    FACTORY 1<br>

                    253190 MILANO (IT)<br>

                </div>

                <div class="A8L">

                    Tel. 02 669172284<br>

                    e-mail: info@alufaoj.it

                    Cod. Fisc. <br>

                    e Partita IVA 2251364245341126

                </div>

            </div>

        </td>

    </tr>

</table>

javascript html css html-table center

edited Nov 19 '18 at 16:30

Brian Tompsett - 汤莱恩

4,2231338101

asked Nov 19 '18 at 15:01

L.BB

132

edited Nov 19 '18 at 16:30

Brian Tompsett - 汤莱恩

4,2231338101

asked Nov 19 '18 at 15:01

L.BB

132

edited Nov 19 '18 at 16:30

Brian Tompsett - 汤莱恩

4,2231338101

edited Nov 19 '18 at 16:30

Brian Tompsett - 汤莱恩

4,2231338101

edited Nov 19 '18 at 16:30

Brian Tompsett - 汤莱恩

4,2231338101

asked Nov 19 '18 at 15:01

L.BB

132

asked Nov 19 '18 at 15:01

L.BB

132

asked Nov 19 '18 at 15:01

L.BB

132

add a comment |

2 Answers
2

active

oldest

votes

What you're seeing there is that the layout engine calculates the width of the element before applying the transformation. One easy way to deal with this is to add a negative horizontal margin:

.rotate {

    -webkit-transform: rotate(270deg);

    -moz-transform: rotate(270deg);

    writing-mode: lr-tb;

    margin: 0 -1.5em;

}

<table class="TABELLA1" width="400px" align="left">

    <tr height="90px">

        <td width="1%">

            <p id="idcliente" class="A8BL rotate">CLIENTE</p>

        </td>

        <td width="99%">

            <div>

                <div class="A8BL">

                    FACTORY 1<br>

                    253190 MILANO (IT)<br>

                </div>

                <div class="A8L">

                    Tel. 02 669172284<br>

                    e-mail: info@alufaoj.it

                    Cod. Fisc. <br>

                    e Partita IVA 2251364245341126

                </div>

            </div>

        </td>

    </tr>

</table>

edited Nov 19 '18 at 15:31

user2154065

8062819

answered Nov 19 '18 at 15:07

nvioli

2,60031429

thank you so much!

– L.BB
Nov 19 '18 at 15:19

Prego, buona fortuna!

– nvioli
Nov 19 '18 at 15:20

add a comment |

Table data with 1% width having a paragraph which simply we can rotate but when there is more or less character you have to manually adjust margin and padding for the center class.

.rotate {

    -webkit-transform: rotate(270deg);

    -moz-transform: rotate(270deg);

    transform: rotate(270deg);

    margin: 0 -1.6em;

}

<table class="TABELLA1" width="400px" align="left">

    <tr height="90px">

        <td width="1%">

            <p id="idcliente" class="A8BL rotate">CLIENTE</p>

        </td>

        <td width="99%">

            <div>

                <div class="A8BL">

                    FACTORY 1<br>

                    253190 MILANO (IT)<br>

                </div>

                <div class="A8L">

                    Tel. 02 669172284<br>

                    e-mail: info@alufaoj.it

                    Cod. Fisc. <br>

                    e Partita IVA 2251364245341126

                </div>

            </div>

        </td>

    </tr>

</table>

edited Nov 20 '18 at 1:38

answered Nov 19 '18 at 15:36

Prameshwar Kumar

574

Can you add some explanation to your solution? Which steps are neccessary?

– Nico Haase
Nov 19 '18 at 16:33

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53377340%2fhow-can-i-fully-control-a-div-rotation%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

What you're seeing there is that the layout engine calculates the width of the element before applying the transformation. One easy way to deal with this is to add a negative horizontal margin:

.rotate {

    -webkit-transform: rotate(270deg);

    -moz-transform: rotate(270deg);

    writing-mode: lr-tb;

    margin: 0 -1.5em;

}

<table class="TABELLA1" width="400px" align="left">

    <tr height="90px">

        <td width="1%">

            <p id="idcliente" class="A8BL rotate">CLIENTE</p>

        </td>

        <td width="99%">

            <div>

                <div class="A8BL">

                    FACTORY 1<br>

                    253190 MILANO (IT)<br>

                </div>

                <div class="A8L">

                    Tel. 02 669172284<br>

                    e-mail: info@alufaoj.it

                    Cod. Fisc. <br>

                    e Partita IVA 2251364245341126

                </div>

            </div>

        </td>

    </tr>

</table>

edited Nov 19 '18 at 15:31

user2154065

8062819

answered Nov 19 '18 at 15:07

nvioli

2,60031429

thank you so much!

– L.BB
Nov 19 '18 at 15:19

Prego, buona fortuna!

– nvioli
Nov 19 '18 at 15:20

add a comment |

What you're seeing there is that the layout engine calculates the width of the element before applying the transformation. One easy way to deal with this is to add a negative horizontal margin:

.rotate {

    -webkit-transform: rotate(270deg);

    -moz-transform: rotate(270deg);

    writing-mode: lr-tb;

    margin: 0 -1.5em;

}

<table class="TABELLA1" width="400px" align="left">

    <tr height="90px">

        <td width="1%">

            <p id="idcliente" class="A8BL rotate">CLIENTE</p>

        </td>

        <td width="99%">

            <div>

                <div class="A8BL">

                    FACTORY 1<br>

                    253190 MILANO (IT)<br>

                </div>

                <div class="A8L">

                    Tel. 02 669172284<br>

                    e-mail: info@alufaoj.it

                    Cod. Fisc. <br>

                    e Partita IVA 2251364245341126

                </div>

            </div>

        </td>

    </tr>

</table>

edited Nov 19 '18 at 15:31

user2154065

8062819

answered Nov 19 '18 at 15:07

nvioli

2,60031429

thank you so much!

– L.BB
Nov 19 '18 at 15:19

Prego, buona fortuna!

– nvioli
Nov 19 '18 at 15:20

add a comment |

What you're seeing there is that the layout engine calculates the width of the element before applying the transformation. One easy way to deal with this is to add a negative horizontal margin:

.rotate {

    -webkit-transform: rotate(270deg);

    -moz-transform: rotate(270deg);

    writing-mode: lr-tb;

    margin: 0 -1.5em;

}

<table class="TABELLA1" width="400px" align="left">

    <tr height="90px">

        <td width="1%">

            <p id="idcliente" class="A8BL rotate">CLIENTE</p>

        </td>

        <td width="99%">

            <div>

                <div class="A8BL">

                    FACTORY 1<br>

                    253190 MILANO (IT)<br>

                </div>

                <div class="A8L">

                    Tel. 02 669172284<br>

                    e-mail: info@alufaoj.it

                    Cod. Fisc. <br>

                    e Partita IVA 2251364245341126

                </div>

            </div>

        </td>

    </tr>

</table>

edited Nov 19 '18 at 15:31

user2154065

8062819

answered Nov 19 '18 at 15:07

nvioli

2,60031429

What you're seeing there is that the layout engine calculates the width of the element before applying the transformation. One easy way to deal with this is to add a negative horizontal margin:

.rotate {

    -webkit-transform: rotate(270deg);

    -moz-transform: rotate(270deg);

    writing-mode: lr-tb;

    margin: 0 -1.5em;

}

<table class="TABELLA1" width="400px" align="left">

    <tr height="90px">

        <td width="1%">

            <p id="idcliente" class="A8BL rotate">CLIENTE</p>

        </td>

        <td width="99%">

            <div>

                <div class="A8BL">

                    FACTORY 1<br>

                    253190 MILANO (IT)<br>

                </div>

                <div class="A8L">

                    Tel. 02 669172284<br>

                    e-mail: info@alufaoj.it

                    Cod. Fisc. <br>

                    e Partita IVA 2251364245341126

                </div>

            </div>

        </td>

    </tr>

</table>

.rotate {

    -webkit-transform: rotate(270deg);

    -moz-transform: rotate(270deg);

    writing-mode: lr-tb;

    margin: 0 -1.5em;

}

<table class="TABELLA1" width="400px" align="left">

    <tr height="90px">

        <td width="1%">

            <p id="idcliente" class="A8BL rotate">CLIENTE</p>

        </td>

        <td width="99%">

            <div>

                <div class="A8BL">

                    FACTORY 1<br>

                    253190 MILANO (IT)<br>

                </div>

                <div class="A8L">

                    Tel. 02 669172284<br>

                    e-mail: info@alufaoj.it

                    Cod. Fisc. <br>

                    e Partita IVA 2251364245341126

                </div>

            </div>

        </td>

    </tr>

</table>

.rotate {

    -webkit-transform: rotate(270deg);

    -moz-transform: rotate(270deg);

    writing-mode: lr-tb;

    margin: 0 -1.5em;

}

<table class="TABELLA1" width="400px" align="left">

    <tr height="90px">

        <td width="1%">

            <p id="idcliente" class="A8BL rotate">CLIENTE</p>

        </td>

        <td width="99%">

            <div>

                <div class="A8BL">

                    FACTORY 1<br>

                    253190 MILANO (IT)<br>

                </div>

                <div class="A8L">

                    Tel. 02 669172284<br>

                    e-mail: info@alufaoj.it

                    Cod. Fisc. <br>

                    e Partita IVA 2251364245341126

                </div>

            </div>

        </td>

    </tr>

</table>

edited Nov 19 '18 at 15:31

user2154065

8062819

answered Nov 19 '18 at 15:07

nvioli

2,60031429

edited Nov 19 '18 at 15:31

user2154065

8062819

edited Nov 19 '18 at 15:31

user2154065

8062819

edited Nov 19 '18 at 15:31

user2154065

8062819

answered Nov 19 '18 at 15:07

nvioli

2,60031429

answered Nov 19 '18 at 15:07

nvioli

2,60031429

answered Nov 19 '18 at 15:07

nvioli

2,60031429

thank you so much!

– L.BB
Nov 19 '18 at 15:19

Prego, buona fortuna!

– nvioli
Nov 19 '18 at 15:20

add a comment |

thank you so much!

– L.BB
Nov 19 '18 at 15:19

Prego, buona fortuna!

– nvioli
Nov 19 '18 at 15:20

thank you so much!

– L.BB
Nov 19 '18 at 15:19

Prego, buona fortuna!

– nvioli
Nov 19 '18 at 15:20

add a comment |

Table data with 1% width having a paragraph which simply we can rotate but when there is more or less character you have to manually adjust margin and padding for the center class.

.rotate {

    -webkit-transform: rotate(270deg);

    -moz-transform: rotate(270deg);

    transform: rotate(270deg);

    margin: 0 -1.6em;

}

<table class="TABELLA1" width="400px" align="left">

    <tr height="90px">

        <td width="1%">

            <p id="idcliente" class="A8BL rotate">CLIENTE</p>

        </td>

        <td width="99%">

            <div>

                <div class="A8BL">

                    FACTORY 1<br>

                    253190 MILANO (IT)<br>

                </div>

                <div class="A8L">

                    Tel. 02 669172284<br>

                    e-mail: info@alufaoj.it

                    Cod. Fisc. <br>

                    e Partita IVA 2251364245341126

                </div>

            </div>

        </td>

    </tr>

</table>

edited Nov 20 '18 at 1:38

answered Nov 19 '18 at 15:36

Prameshwar Kumar

574

Can you add some explanation to your solution? Which steps are neccessary?

– Nico Haase
Nov 19 '18 at 16:33

add a comment |

Table data with 1% width having a paragraph which simply we can rotate but when there is more or less character you have to manually adjust margin and padding for the center class.

.rotate {

    -webkit-transform: rotate(270deg);

    -moz-transform: rotate(270deg);

    transform: rotate(270deg);

    margin: 0 -1.6em;

}

<table class="TABELLA1" width="400px" align="left">

    <tr height="90px">

        <td width="1%">

            <p id="idcliente" class="A8BL rotate">CLIENTE</p>

        </td>

        <td width="99%">

            <div>

                <div class="A8BL">

                    FACTORY 1<br>

                    253190 MILANO (IT)<br>

                </div>

                <div class="A8L">

                    Tel. 02 669172284<br>

                    e-mail: info@alufaoj.it

                    Cod. Fisc. <br>

                    e Partita IVA 2251364245341126

                </div>

            </div>

        </td>

    </tr>

</table>

edited Nov 20 '18 at 1:38

answered Nov 19 '18 at 15:36

Prameshwar Kumar

574

Can you add some explanation to your solution? Which steps are neccessary?

– Nico Haase
Nov 19 '18 at 16:33

add a comment |

Table data with 1% width having a paragraph which simply we can rotate but when there is more or less character you have to manually adjust margin and padding for the center class.

.rotate {

    -webkit-transform: rotate(270deg);

    -moz-transform: rotate(270deg);

    transform: rotate(270deg);

    margin: 0 -1.6em;

}

<table class="TABELLA1" width="400px" align="left">

    <tr height="90px">

        <td width="1%">

            <p id="idcliente" class="A8BL rotate">CLIENTE</p>

        </td>

        <td width="99%">

            <div>

                <div class="A8BL">

                    FACTORY 1<br>

                    253190 MILANO (IT)<br>

                </div>

                <div class="A8L">

                    Tel. 02 669172284<br>

                    e-mail: info@alufaoj.it

                    Cod. Fisc. <br>

                    e Partita IVA 2251364245341126

                </div>

            </div>

        </td>

    </tr>

</table>

edited Nov 20 '18 at 1:38

answered Nov 19 '18 at 15:36

Prameshwar Kumar

574

Table data with 1% width having a paragraph which simply we can rotate but when there is more or less character you have to manually adjust margin and padding for the center class.

.rotate {

    -webkit-transform: rotate(270deg);

    -moz-transform: rotate(270deg);

    transform: rotate(270deg);

    margin: 0 -1.6em;

}

<table class="TABELLA1" width="400px" align="left">

    <tr height="90px">

        <td width="1%">

            <p id="idcliente" class="A8BL rotate">CLIENTE</p>

        </td>

        <td width="99%">

            <div>

                <div class="A8BL">

                    FACTORY 1<br>

                    253190 MILANO (IT)<br>

                </div>

                <div class="A8L">

                    Tel. 02 669172284<br>

                    e-mail: info@alufaoj.it

                    Cod. Fisc. <br>

                    e Partita IVA 2251364245341126

                </div>

            </div>

        </td>

    </tr>

</table>

.rotate {

    -webkit-transform: rotate(270deg);

    -moz-transform: rotate(270deg);

    transform: rotate(270deg);

    margin: 0 -1.6em;

}

<table class="TABELLA1" width="400px" align="left">

    <tr height="90px">

        <td width="1%">

            <p id="idcliente" class="A8BL rotate">CLIENTE</p>

        </td>

        <td width="99%">

            <div>

                <div class="A8BL">

                    FACTORY 1<br>

                    253190 MILANO (IT)<br>

                </div>

                <div class="A8L">

                    Tel. 02 669172284<br>

                    e-mail: info@alufaoj.it

                    Cod. Fisc. <br>

                    e Partita IVA 2251364245341126

                </div>

            </div>

        </td>

    </tr>

</table>

.rotate {

    -webkit-transform: rotate(270deg);

    -moz-transform: rotate(270deg);

    transform: rotate(270deg);

    margin: 0 -1.6em;

}

<table class="TABELLA1" width="400px" align="left">

    <tr height="90px">

        <td width="1%">

            <p id="idcliente" class="A8BL rotate">CLIENTE</p>

        </td>

        <td width="99%">

            <div>

                <div class="A8BL">

                    FACTORY 1<br>

                    253190 MILANO (IT)<br>

                </div>

                <div class="A8L">

                    Tel. 02 669172284<br>

                    e-mail: info@alufaoj.it

                    Cod. Fisc. <br>

                    e Partita IVA 2251364245341126

                </div>

            </div>

        </td>

    </tr>

</table>

edited Nov 20 '18 at 1:38

answered Nov 19 '18 at 15:36

Prameshwar Kumar

574

edited Nov 20 '18 at 1:38

answered Nov 19 '18 at 15:36

Prameshwar Kumar

574

answered Nov 19 '18 at 15:36

Prameshwar Kumar

574

answered Nov 19 '18 at 15:36

Prameshwar Kumar

574

Can you add some explanation to your solution? Which steps are neccessary?

– Nico Haase
Nov 19 '18 at 16:33

add a comment |

Can you add some explanation to your solution? Which steps are neccessary?

– Nico Haase
Nov 19 '18 at 16:33

Can you add some explanation to your solution? Which steps are neccessary?

– Nico Haase
Nov 19 '18 at 16:33

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Agfdhyk