JSFiddle - React, Tailwind, and code Playground

by formikulo

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

.outer {
					width: 100%;
       }
td {
				border: 1px solid;
			}
.inner {
							width: calc(100% + 4px);
							margin: -2px;
			}
.outer, .inner {
    border-spacing: 0px;
		border-collapse: collapse;
    text-align: center;
}