JSFiddle - React, Tailwind, and code Playground

HTML

<table id="tableid">
    <thead>
        <tr>
            <th>Name</th>
            <th>Surname</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>Smith</td>
            <td>47</td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>Jones</td>
            <td>38</td>
        </tr>
	</tbody>
</table>
</br>
<table id="tableid">
    <tr>
		<table>
			<tr>
				<th>Name</th>
				<td>John</td>
			</tr>
			<tr>
				<th>Surname</th>
				<td>Smith</td></tr>
			<tr>
				<th>Age</th>
				<td>47</td>
			</tr>
		</table>
    </tr>
    <tr>
		<table>
			<tr>
				<th>Name</th>
				<td>Bob</td>
			</tr>
			<tr>
				<th>Surname</th>
				<td>Jones</td></tr>
			<tr>
				<th>Age</th>
				<td>38</td>
			</tr>
		</table>
    </tr>
</table>

CSS

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}