JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Таблицы</title>
	</head>
	<body>
		<table cellspacing="1" border="1" class="outer">
			<caption>Таблица 1</caption>
			<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
			<tr><td>5</td><td>6</td></tr>
		</table>
		<br>
		<br>
		<table class="outer">
			<caption align="top">Таблица 2</caption>
			<tr>
				<td>
         <table border="1" class="inner">
					<tr><th colspan="3">Заголовок 1</th></tr>
					<tr><td>1</td><td>2</td><td>3</td></tr>
				 </table>
        </td>
			</tr>
			<tr>
				<td>
         <table border="1" class="inner">
					<tr ><th colspan="4">Заголовок 2</th></tr>
					<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
				 </table>
        </td>
			</tr>
			<tr>
				<td>
         <table border="1" class="inner">
					<tr ><th colspan="5">Заголовок 3</th></tr>
					<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
				 </table>
        </td>
			</tr>
		</table>
	</body>
</html>

CSS

table {
  width: 100%;

  border-collapse: collapse;
  border-spacing: 0;

  text-align: center;
}

td {
  border: 1px solid;
}

.inner {
  width: calc(100% + 4px);
  margin: -2px;
}