JSFiddle - React, Tailwind, and code Playground

by Tmin10

HTML

<div class="carr">
    <table class="table-bordered">
        <thead>
            <tr>
                <th colspan="2" rowspan="3">НАГРУЗКА НА 2013-2014 УЧ. ГОД</th>
                <th rowspan="3" class="table-rotate">Семестр</th>
                <th rowspan="3" class="table-rotate">Курс</th>
                <th rowspan="3" class="table-rotate">Индексы групп</th>
                <th rowspan="3" class="table-rotate">Количество студентов</th>
                <th colspan="20">Часов</th>
            </tr>
            <tr>
                <th rowspan="2" class="table-rotate">Лекции</th>
                <th colspan="2">Практические занятия</th>
                <th colspan="2">лаб занятия</th>
                <th colspan="2">консул</th>
                <th rowspan="2" class="table-rotate">Экзамены</th>
                <th rowspan="2" class="table-rotate">Зачёты</th>
                <th rowspan="2" class="table-rotate">Практика</th>
                <th rowspan="2" class="table-rotate">курсовое проектирование</th>
                <th rowspan="2" class="table-rotate">дипломное проектирование</th>
                <th rowspan="2" class="table-rotate">проверка РГР</th>
                <th rowspan="2" class="table-rotate">рецензр. контр. работ</th>
                <th rowspan="2" class="table-rotate">занятия с аспирантами</th>
                <th rowspan="2" class="table-rotate">занятия с соискателями</th>
                <th rowspan="2" class="table-rotate">ГЭК</th>
                <th rowspan="2" class="table-rotate">выпускная работа</th>
                <th rowspan="2" class="table-rotate">руководство магистрами</th>
                <th rowspan="2" class="table-rotate">Всего учебных часов к расчёту штатов</th>
            </tr>
            <tr>
                <th class="table-rotate">По плану</th>
                <th class="table-rotate">Всего</th>
                <th class="table-rotate">По плану</th>
                <th class="table-rotate">Всего</th>
               ...

CSS

.carr {
             width: 960px;
             margin: auto;
         }
         table tr th, table tr td {
             width: 37px;
         }
         table thead {
             width: 300px;
         }
         .table-rotate {
             -moz-transform: rotate(90deg);
             -webkit-transform: rotate(90deg);
             -o-transform: rotate(90deg);
             transform: rotate(90deg);
             padding-top: 0 !important;
         }
         .table-bordered {
             border: 1px solid #dddddd;
             border-collapse: collapse;
             border-spacing: 0;
         }
         .table-bordered th, .table-bordered td {
             border: 1px solid #ddd !important;
         }
         .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {
             border: 1px solid #dddddd;
         }