Question

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.

Answer 1

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