JSFiddle - React, Tailwind, and code Playground
HTML
<table width="100%" class="exmpl1">
<tr>
<th colspan="2">Вариант №1 (<span>если в таблице изначально только 1н столбец</span>)</th>
</tr>
<tr>
<td width="50%">Много, много текста 1</td>
<td width="50%">Много, много текста 2</td>
</tr>
</table>
<br />
<table width="100%">
<tr>
<th colspan="2">Вариант №2 (<span>если в таблице изначально 2ва и более столбцов</span>)</th>
</tr>
<tr>
<td width="50%">
<table width="100%" class="exmpl2">
<tr>
<td width="50%">Много, много текста 1</td>
<td width="50%">Много, много текста 2</td>
</tr>
</table>
</td>
<td width="50%"></td>
</tr>
</table>
CSS
table {
border-collapse: collapse;
border: 1px solid black;
}
th {
padding: 0.5%;
}
th span {
color: #B80000;
}
.exmpl1 td {
padding: 0.5%;
border: 1px solid red;
}
.exmpl2 td {
padding: 0.5%;
border: 1px solid red;
}