Vertical header cells w/ constraints on width/height

CSS3 Transform

by PhilippeVay

HTML

<table border="1" class="division-table">
    <thead>
        <tr>
            <th scope="col" class="colum-1"><span>Team</span></th>
            <th scope="col" class="colum-2"><span>P</span></th>
            <th scope="col" class="colum-3"><span>WWW</span></th>
            <th scope="col" class="colum-4"><span>L</span></th></th>
            <th scope="col" class="colum-5"><span>D</span></th>
            <th scope="col" class="colum-6"><span>Pts</span></th>
        </tr>
    </thead>
    <tbody>
        <tr class="back-shade">
            <td class="colum-1 content"><a href="#" class="navigation-hotlink">Parks Team 2</a><span class="report-error-table-icon report-error-icon-table-1" id="popup-1"><img alt=" Error" src="images/icons/error.png"></span>
            </td>
            <td class="colum-2 content">3</td>
            <td class="colum-3 content">2</td>
            <td class="colum-4 content">0</td>
            <td class="colum-5 content">1</td>
            <td class="colum-6 content">7</td>
        </tr>
        <tr class="back-shade">
            <td class="colum-1 content"><a href="#" class="navigation-hotlink">Parks Team 1</a><span class="report-error-table-icon report-error-icon-table-1" id="popup-2"><img alt=" Error" src="images/icons/error.png"></span>
            </td>
            <td class="colum-2 content">3</td>
            <td class="colum-3 content">0</td>
            <td class="colum-4 content">2</td>
            <td class="colum-5 content">1</td>
            <td class="colum-6 content">1</td>
        </tr>
    </tbody>
</table>

CSS

table {
    border-collapse: collapse;
    margin: 10px auto;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 1em;
}

th, td {
    padding: 4px;
    text-align: center;
}

td.colum-1 {
    text-align: left;
}

thead {
    height: 70px;
}

th {
    background: #BCF5A9;
    font-weight: normal;
    width: 40px;
    padding: 0;
}

th span {
    /*outline: 1px solid red;*/
    display: table-cell;
    -moz-transform: rotate(90deg) translate(0, 0);
    -moz-transform-origin: 50% 50%;
    width: 40px;
    height: 40px;
    vertical-align: middle;
}

th.colum-1 {
    background: lightblue;
    width: 170px;
}

th.colum-1 span {
    -moz-transform: rotate(90deg);
    /*-moz-transform: none;*/  /* for an horizontal first cell */
    width: 170px;
}