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