JSFiddle - React, Tailwind, and code Playground

HTML

<table id="table1">
<thead></thead>
<tfoot></tfoot>
<tbody>
	<tr>
		<td>td 1</td>
		<td rowspan="2">td 2</td>
		<td>td 3</td>
		<td>td 4</td>
	</tr>
	<tr>
		<td>td 1</td>
		<td>td 3</td>
		<td>td 4</td>
	</tr>
</tbody>
</table>

<table id="table2">
<thead></thead>
<tfoot></tfoot>
<tbody>
	<tr>
		<td>td 1</td>
		<td rowspan="2">td 2</td>
		<td>td 3</td>
		<td>td 4</td>
	</tr>
	<tr>
		<td>td 1</td>
		<td>td 3</td>
		<td>td 4</td>
	</tr>
</tbody>
</table>

CSS

table#table1
{
    width: 99%;
    margin: 0.5%;
}

table#table1 td
{
    border: 1px solid #2d2d2d;
}

/* that style leads to visual error */
table#table1 tbody::before
{
	content: '';
	display: block;
	height: 10px;    
}



table#table2
{
    width: 99%;
    margin: 0.5%;
}

table#table2 td
{
    border: 1px solid #2d2d2d;
}

/* that style's good. */
table#table2 tbody::before
{
	content: '';
	display: table-row;
	height: 10px;    
}