Shopify Table for Specifications

example.html

<div class="table-column">
	<table class="table-default">
		<tbody>
			<tr>
				<th scope="row">Código do Produto</th>
				<td>E88</td>
			</tr>
			<tr>
				<th scope="row">Cor do Produto</th>
				<td>Preto</td>
			</tr>
			<tr>
				<th scope="row">Marca</th>
				<td>Outros</td>
			</tr>
			<tr>
				<th scope="row">Categoria</th>
				<td>Camera Drone</td>
			</tr>
		</tbody>
	</table>
	<table class="table-default">
		<tbody>
			<tr>
				<th scope="row">Capacidade da Bateria</th>
				<td>3.7V 1800mAH</td>
			</tr>
			<tr>
				<th scope="row">Tamanho do Drone</th>
				<td>Desdobrado: 28*22*5CM, Dobrado: 12.5*8.1*5.3CM</td>
			</tr>
			<tr>
				<th scope="row">Peso do Drone</th>
				<td>370g</td>
			</tr>
			<tr>
				<th scope="row">Máxima Resistência ao Vento</th>
				<td>&lt;10km/h</td>
			</tr>
			<tr>
				<th scope="row">Tempo de Voo</th>
				<td>8-12 minutos</td>
			</tr>
			<tr>
				<th scope="row">Distância do Controle Remoto</th>
				<td>Cerca de 100 metros</td>
			</tr>
			<tr>
				<th scope="row">Tempo de Carregamento</th>
				<td>Cerca de 40 minutos</td>
			</tr>
			<tr>
				<th scope="row">Método de Carregamento</th>
				<td>Por cabo USB</td>
			</tr>
			<tr>
				<th scope="row">Resolução Máxima de Vídeo</th>
				<td>720P (1280*720)</td>
			</tr>
			<tr>
				<th scope="row">Características da Câmera</th>
				<td>Gravação de vídeo HD 1080p</td>
			</tr>
			<tr>
				<th scope="row">Frequência de Operação do Aeronave</th>
				<td>2.4GHz</td>
			</tr>
			<tr>
				<th scope="row">Conectividade</th>
				<td>Controle APP</td>
			</tr>
		</tbody>
	</table>
</div>
<div class="table-column">
	<table class="table-default">
		<tbody>
			<tr>
				<th scope="row">Função de Altura Fixa</th>
				<td>Sim</td>
			</tr>
			<tr>
				<th scope="row">Aeronave Dobrável</th>
				<td>Sim</td>
			</tr>
			<tr>
				<th scope="row">Função de Descolagem/Aterragem com Uma Tecla</th>
				<td>Sim</td>
			</tr>
			<tr>
				<th scope="row">Modo Sem Cabeça</th>
				<td>Sim</td>
			</tr>
			<tr>
				<th scope="row">Rolo de 360 °</th>
				<td>Sim</td>
			</tr>
			<tr>
				<th scope="row">Aerial Photography</th>
				<td>Sim</td>
			</tr>
			<tr>
				<th scope="row">Função de Ajuste Fino</th>
				<td>Sim</td>
			</tr>
			<tr>
				<th scope="row">Recurso de Retorno com Uma Tecla</th>
				<td>Sim</td>
			</tr>
			<tr>
				<th scope="row">Detecção de Gravidade</th>
				<td>Sim</td>
			</tr>
		</tbody>
	</table>
	<table class="table-default">
		<tbody>
			<tr>
				<th scope="row">Código do produto</th>
				<td>E88</td>
			</tr>
			<tr>
				<th scope="row">Cor do produto</th>
				<td>Preto</td>
			</tr>
			<tr>
				<th scope="row">Categoria</th>
				<td>Câmera Drone</td>
			</tr>
		</tbody>
	</table>
</div>

shopify-specifications-table.css

:root {
    --border-color: #ccc;
    --background-secondary: #f9f9f9;
    --spacing: 1rem;
}

.table-root {
    display: flex;
    flex-direction: row;
    gap: var(--spacing);
}

.table-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing);
}

.table-default {
    width: 100%;
    border-collapse: collapse;
    height: auto;
    border: 1px solid var(--border-color);
}

.table-default tbody th {
    text-align: left;
    padding: 1rem 1.5rem;
    font-size: 12px;
    font-weight: 600;
}

.table-default tbody th[scope="row"] {
    width: 37%;
}

.table-default tbody td {
    padding: 1rem 1.5rem;
    font-size: 12px;
}

.table-default tbody tr {
    border-bottom: 1px solid var(--border-color);
}

.table-default tbody tr:nth-child(even) {
    background-color: var(--background-secondary);
}