Vertical Text on a webpage

css, html, text-rotation

Solution

Modify the `th` like this:

<th>
    <div class="container">
        <div class="head">
            <div class="vert">Column 1</div>
        </div>
    </div>
</th>
<th>
    <div class="container">
        <div class="head">
            <div class="vert">Col 2</div>
        </div>
    </div>
</th>
<th>
    <div class="container">
        <div class="head">
            <div class="vert">Column Two</div>
        </div>
    </div>
</th>

And add the CSS provided in the Fiddle and you will get the desired result, I hope.

FIDDLE

Problem

Let me preface by saying I know this question has been asked plenty, but none of the answers worked for me. Most solutions instruct the use of `transform:rotate(270deg);`, however, this messes with the width as the block is generated in a way that doesn't take into consideration the rotation, making the block wider than desired. My goal is to get something like the following (in a table): I have been playing around with a variety of different CSS properties with now luck. Here is a basic sandbox I have been working with, which demonstrates some of the problems I have been experiencing.

Original source