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"><span class="rotated-text"><span class="rotated-text__inner">Семестр</span></span></th>
                <th rowspan="3"><span class="rotated-text"><span class="rotated-text__inner">Курс</span></span></th>
                <th rowspan="3"><span class="rotated-text"><span class="rotated-text__inner">Индексы групп</span></span></th>
                <th rowspan="3"><span class="rotated-text"><span class="rotated-text__inner">Количество студентов</span></span></th>
                <th colspan="20">Часов</th>
            </tr>
            <tr>
                <th rowspan="2"><span class="rotated-text"><span class="rotated-text__inner">Лекции</span></span></th>
                <th colspan="2">Практические занятия</th>
                <th colspan="2">лаб занятия</th>
                <th colspan="2">консул</th>
                <th rowspan="2"><span class="rotated-text"><span class="rotated-text__inner">Экзамены</span></span></th>
                <th rowspan="2"><span class="rotated-text"><span class="rotated-text__inner">Зачёты</span></span></th>
                <th rowspan="2"><span class="rotated-text"><span class="rotated-text__inner">Практика</span></span></th>
                <th rowspan="2"><span class="rotated-text"><span class="rotated-text__inner">курсовое проектирование</span></span></th>
                <th rowspan="2"><span class="rotated-text"><span class="rotated-text__inner">дипломное проектирование</span></span></th>
                <th rowspan="2"><span class="rotated-text"><span class="rotated-text__inner">проверка РГР</span></span></th>
                <th rowspan="2"><span class="rotated-text"><span class="rotated-text__inner">рецензр. контр. работ</span></span></th>
                <th rowspan="2"><span class="rotated-text"><span...

CSS

.carr {
             width: 1100px;
             margin: auto;
         }
         table tr th, table tr td {
             width: 37px;
         }
         table thead {
             width: 300px;
         }
         .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;
         }
         .rotated-text {
			display: inline-block;
			overflow: hidden;
			width: 1.5em;
			line-height: 1.5;
		}
		.rotated-text__inner {
			display: inline-block;
			white-space: nowrap;
			-webkit-transform: translate(0,100%) rotate(-90deg);
			   -moz-transform: translate(0,100%) rotate(-90deg);
				-ms-transform: translate(0,100%) rotate(-90deg);
				 -o-transform: translate(0,100%) rotate(-90deg);
					transform: translate(0,100%) rotate(-90deg);
			-webkit-transform-origin: 0 0;
			   -moz-transform-origin: 0 0;
				-ms-transform-origin: 0 0;
				 -o-transform-origin: 0 0;
					transform-origin: 0 0;
		}
		/* This element stretches the parent to be square
		   by using the mechanics of vertical margins  */
		.rotated-text__inner:before {
			content: "";
			float: left;
			margin-top: 100%;
		}