S191076703

HTML

<table class="channels">
    <colgroup>
        <col width="40">
            <col width="200">
                <col width="110">
                    <col width="110">
                        <col width="110">
                            <col width="110">
                                <col width="110">
                                    <col width="110">
                                        <col width="110">
    </colgroup>
    <thead>
        <tr class="top_header">
            <th class="empty"></th>
            <th class="empty"></th>
            <th>10+ Channels
            </th>
            <th>23+ Channels</th>
            <th>32+ Channels</th>
            <th>45+ Channels</th>
            <th>24+ Channels</th>
            <th>140+ Channels</th>
            <th>220+ Channels</th>
        </tr>
        <tr class="bottom_header">
            <th class="empty"></th>
            <th class="empty"></th>
            <th>Locals</th>
            <th>Locals,&nbsp;Family</th>
            <th>Locals,
                <br>Entertainment</th>
            <th>Locals,&nbsp;Family,
                <br>Entertainment</th>
            <th>Locals,&nbsp;Sports</th>
            <th>Locals,&nbsp;Family,
                <br>Entertainment,
                <br>Sports</th>
            <th>Locals,&nbsp;Family,
                <br>Entertainment,
                <br>Sports&nbsp;&amp;&nbsp;More</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="16" class="row_group locals"><span>LOCALS</span></td>
            <td class="channel_row">ABC</td>
            <td class="available">X</td>
            <td class="available">X</td>
            <td class="available">X</td>
            <td class="available">X</td>
            <td class="available">X</td>
            <td class="available">X</td>
            <td class="available">X</td>
        </tr>
        <tr>
            <td class="channel_row">CBS</td>
            <td class="available">X</td>
            <td...

CSS

@import url(https://fonts.googleapis.com/css?family=Raleway);
.channels {
    border-collapse: collapse;
    background-color: #FFF;
    font-family: Raleway, Calibri, Arial, sans-serif;
    font-size: .85em;
    margin: 0 auto;
}

td {
    border: solid 1px #000;
    text-align: center;
    padding: .3em;
}

.top_header .empty {
    border: none;
    vertical-align: middle;
}

.top_header th,
.bottom_header th {
    border: solid 2px #000;
}

.top_header th {
    vertical-align: middle;
}

.bottom_header th {
    vertical-align: bottom;
}

.bottom_header .empty {
    border: none;
    border-bottom: solid 2px #000;
    vertical-align: bottom;
}

.not_available {
    background-color: #CCC;
    border-right: solid 2px #000;
    border-left: solid 2px #000;
}

.available {
    min-width: 113px;
    border-right: solid 2px #000;
    border-left: solid 2px #000;
}

.row_group {
    padding: .05em;
    border: solid 2px #000;
}

.row_group span {
    transform: rotate(-90deg);
    max-width: 40px !important;
    font-weight: bold;
    display: block;
}

.channel_row {
    min-width: 150px;
    text-align: left;
}

.row_group.locals {
    background-color: rgb(180, 198, 231);
}

.row_group.family {
    background-color: rgb(255, 230, 153);
}

.row_group.ent {
    background-color: rgb(253, 169, 249);
}

.row_group.sports {
    background-color: rgb(198, 224, 180);
}

.row_group.more {
    background-color: rgb(248, 203, 173);
}

.group_end {
    border-bottom: solid 2px #000;
}

JavaScript

$('.row_group:gt(0)').closest('tr').prev('tr').add('tbody tr:last').children().addClass('group_end');