Table games

by eirc

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css">
<div class="container">
    <table>
        <tr>
            <th class="top-left">
                <i class="icon-plane out"></i>
                <hr />
                <i class="icon-plane return"></i>
            </th>
            <th></th>
            <th class="date horizontal first">Wed<br/>21/8</th>
            <th class="date horizontal">Thu<br/>22/8</th>
            <th class="date horizontal">Fri<br/>23/8</th>
            <th class="date horizontal">Sat<br/>24/8</th>
            <th class="date horizontal">Sun<br/>25/8</th>
            <th></th>
        </tr>
        <tr>
            <th></th>
            <th></th>
            <th colspan="5" class="scroll up">
                <i class="icon-chevron-up"></i>
            </th>
            <th></th>
        </tr>
        <tr>
            <th class="date vertical first">Fri<br/>23/8</th>
            <th rowspan="4" class="scroll left">
                <i class="icon-chevron-left"></i>
            </th>
            <td><a href="#">1550</a></td>
            <td><a href="#">1550</a></td>
            <td><a href="#">1550</a></td>
            <td><a href="#">1550</a></td>
            <td><a href="#">1550</a></td>
            <th rowspan="4" class="scroll right">
                <i class="icon-chevron-right"></i>
            </th>
        </tr>
        <tr>
            <th class="date vertical">Sat<br/>24/8</th>
            <td><a href="#">1550</a></td>
            <td><a href="#">1550</a></td>
            <td><a href="#">1550</a></td>
            <td><a href="#">1550</a></td>
            <td><a href="#">1550</a></td>
        </tr>
        <tr>
            <th class="date vertical">Sun<br/>25/8</th>
            <td><a href="#">1550</a></td>
            <td><a href="#">1550</a></td>
            <td><a href="#">1550</a></td>
            <td><a href="#">1550</a></td>
            <td><a href="#">1550</a></td>
       ...

SCSS

$container_width: 295px;
$data_cell_height: 40px;
$date_cell_small_dimension: $data_cell_height * 80 / 100;
$scroller_small_dimension: 10px;

.container {
    width: $container_width;
}

table {
    color: gray;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    
    th, td {
        vertical-align: middle;
        text-align: center;
    }
}

table td {
    height: $data_cell_height;
}

table th.top-left {
    position: relative;
    hr {
        border: solid 1px gray;
        border-top: 0;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);        
    }
    .out {
        position: absolute;
        top: 0;
        right: 0;
        
        &:before {
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            transform: rotate(45deg);
        }
    }
    .return {
        position: absolute;
        bottom: 0;
        left: 0;

        &:before {
            -webkit-transform: rotate(-135deg);
            -moz-transform: rotate(-135deg);
            -ms-transform: rotate(-135deg);
            -o-transform: rotate(-135deg);
            transform: rotate(-135deg);
        }
    }
}

/* DATES */
table th.date {
    font-weight: normal;
}

table th.date.horizontal {
    border-right: solid 1px gray;
    height: $date_cell_small_dimension;
    
    &.first {
        border-left: solid 1px gray;
    }
}

table th.date.vertical {
    border-bottom: solid 1px gray;
    width: $date_cell_small_dimension;
    
    &.first {
        border-top: solid 1px gray;
    }
}

/* DATACELLS */
table td {
    border: solid 1px gray;
}

/* SCROLLERS */
table th.scroll {
    font-size: $scroller_small_dimension;
    cursor: pointer;

    &:hover {
        color: red;
    }
    
    &.up, &.down {
 ...