Rotate table header

Question

I am trying to rotate the headers in a bootstrap 4 table by -60° by adding a class rotated-text to each header:

<table class="table table-hover">
    <thead class="text-left">
        <th class="rotated-text" scope="col">Col 1 header</th>
    </thead>

    [...]

.rotated-text {
    -webkit-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
    transform: rotate(-60deg);
    font-size: larger;
}

However this results in the header being wrapped and the text is not truly left-aligned to the header/row border (see below snippet). How can I fix this?

.rotated-text {
    -webkit-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
    transform: rotate(-60deg);

    font-size: larger;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

 <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
        
<div class="row mt-4">
        <div class="col-md-3"></div>
        <div class="col-xs-12 col-md-6">
            <table class="table table-hover">
                <thead class="membership-tiers text-left">
                <tr>
                    <th scope="col"></th>
                    <th class="rotated-text" scope="col">View page 1</th>
                    <th class="rotated-text" scope="col">View page 2</th>
                    <th class="rotated-text" scope="col">Contact James</th>
                    <th class="rotated-text" scope="col">View James' profiles</th>
                    <th class="rotated-text" scope="col">View Alan' data</th>
                    <th class="rotated-text" scope="col">Contact Alan</th>
                    <th class="rotated-text" scope="col">Edit page 1</th>
                    <th class="rotated-text" scope="col">Edit page 2</th>
                    <th class="rotated-text" scope="col">Delete page 1</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <th scope="row">James</th>
                    <td>V</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>V</td>
                    <td>X</td>
                </tr>
                <tr>
                    <th scope="row">Alan</th>
                    <td>V</td>
                    <td>V</td>
                    <td>X</td>
                    <td>X</td>
                    <td>V</td>
                    <td>X</td>
                    <td>V</td>
                    <td>V</td>
                    <td>X</td>
                </tr>
                <tr>
                    <th scope="row">Emma</th>
                    <td>V</td>
                    <td>V</td>
                    <td>V</td>
                    <td>V</td>
                    <td>V</td>
                    <td>V</td>
                    <td>V</td>
                    <td>V</td>
                    <td>V</td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="col-md-3"></div>
    </div>

Answer 1

Ah. The trick here is to put the header text in a <span> nested in a <div> (see this article):

th.rotated-text {
    height: 140px;
    white-space: nowrap;
    padding: 0 !important;
}

th.rotated-text > div {
    transform:
        translate(13px, 0px)
        rotate(310deg);
    width: 30px;
}

th.rotated-text > div > span {
    padding: 5px 10px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

 <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
        
<div class="row mt-4">
        <div class="col-md-3"></div>
        <div class="col-xs-12 col-md-6">
            <table class="table table-hover">
                <thead class="membership-tiers text-left">
                <tr>
                    <th scope="col"></th>
                    <th class="rotated-text" scope="col"><div><span>View page 1</span></div></th>
                    <th class="rotated-text" scope="col"><div><span>View page 2</span></div></th>
                    <th class="rotated-text" scope="col"><div><span>Contact James</span></div></th>
                    <th class="rotated-text" scope="col"><div><span>Contact Alan</span></div></th>
                    <th class="rotated-text" scope="col"><div><span>View James' profile</span></div></th>
                    <th class="rotated-text" scope="col"><div><span>View Alan's data</span></div></th>
                    <th class="rotated-text" scope="col"><div><span>Edit page 1</span></div></th>
                    <th class="rotated-text" scope="col"><div><span>Edit page 2</span></div></th>
                    <th class="rotated-text" scope="col"><div><span>Delete page 1</span></div></th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <th scope="row">James</th>
                    <td>V</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>V</td>
                    <td>X</td>
                </tr>
                <tr>
                    <th scope="row">Alan</th>
                    <td>V</td>
                    <td>V</td>
                    <td>X</td>
                    <td>X</td>
                    <td>V</td>
                    <td>X</td>
                    <td>V</td>
                    <td>V</td>
                    <td>X</td>
                </tr>
                <tr>
                    <th scope="row">Emma</th>
                    <td>V</td>
                    <td>V</td>
                    <td>V</td>
                    <td>V</td>
                    <td>V</td>
                    <td>V</td>
                    <td>V</td>
                    <td>V</td>
                    <td>V</td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="col-md-3"></div>
    </div>