JSFiddle - React, Tailwind, and code Playground

by rikazavr

HTML

<!DOCTYPE html>

<html lang="ru-RU">

<head>
	<meta charset="UTF-8"/>
	<title>таблица2</title>
	<link rel="stylesheet" href="style.css"/>
</head>

<body>
	<h3>Вторая таблица</h3>
		<table class="tablerod">
		<caption>Родительская таблица</caption>
			<tr>
				<td>1-2</td>
				<td>3</td>
			</tr>
			<tr class="borde1r">
				
				<td>4</td>
				<td rowspan="2">
					<table class="doctable1e">
						<caption>Дочерняя таблица</caption>
						<tr>
							<td>1</td>
							<td rowspan="2">2-5-8</td>
							<td class="bord2">3</td>
						</tr>
						<tr>
							<td class="bord1">4-7</td>
							<td>2</td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td>7</td>
			</tr>
		</table>
</body>

</html>

CSS

table{
	border:1px solid #000;
	width:75%;
	border-spacing:0;
	border-collapse:collapse;
}
  
td{
	width:33.33%;
	border:1px solid #000;
}
.wisota{
	height:200px;
}
.tablerod{
	width:90%;
	border-collapse:collapse;
	margin:0 auto;
	text-align:center;
}
.borde1r{
	width:25px;
}
.doctable1e{
	width:80%;
	margin:0 auto;
	position:relative;
}
.bord1
{
	height:200px;
}
.bord2
{
	height:200px;
}