JSFiddle - React, Tailwind, and code Playground

by RadCor

HTML

<t>
	<r class="r1">
		<r>
			<c>Ученик</c>
		</r>
		<r>
			<c>Предмет</c>
			<c>Информатика</c>
			<c>Математика</c>
			<c>I четверть</c>
			<c>II четверть</c>
			<c>1-е полугодие</c>
			<c>I четверть</c>
			<c>II четверть</c>
			<c>1-е полугодие</c>
		</r>
	</r>
	<r class="r2">
		<c>Баутин Дима</c>
		<c>4</c>
		<c>5</c>
		<c>5</c>
		<c>4</c>
		<c>4</c>
		<c>4</c>
	</r>
	<r class="r2">
		<c>Голубев Миша</c>
		<c>4</c>
		<c>4</c>
		<c>4</c>
		<c>3</c>
		<c>4</c>
		<c>4</c>
	</r>
	<r class="r2">
		<c>Куликов Иван</c>
		<c>5</c>
		<c>5</c>
		<c>5</c>
		<c>5</c>
		<c>5</c>
		<c>5</c>
	</r>
	<r class="r2">
		<c>Радугина Анна</c>
		<c>4</c>
		<c>5</c>
		<c>5</c>
		<c>5</c>
		<c>5</c>
		<c>5</c>
	</r>
</t>

SCSS

t {
	display: flex;
	min-width: 600px;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	text-align: center;
	font-family:Arial, sans-serif;
	border-top: 1px solid #000;
	border-left: 1px solid #000;
	* {
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
	}
	c {
		min-height: 40px;
		line-height: 20px;
		border-right: 1px solid #000;
		border-bottom: 1px solid #000;
	}
	> .r1 {
		width: 100%;
		font-weight: bold;
		> r:nth-child(1) {
			width: 20%;
			c {
				width: 100%;
				min-height: 120px;
				font-weight: bold;
			}
		}
		> r:nth-child(2) {
			flex-wrap: wrap;
			width: 80%;
			> c:nth-child(1) {
				width: 100%;
			}
			> c:nth-child(2), > c:nth-child(3) {
				width: 50%
			}
			> c:nth-child(4), > c:nth-child(5), > c:nth-child(6), > c:nth-child(6), > c:nth-child(7), > c:nth-child(8), > c:nth-child(9){
				width: 16.666%;
			}
		}
	}
	> .r2 {
		width: 100%;
		> c:first-child {
			width: 20%;
		}
		> c {
			width: 13.333%;
		}
	}
}