Preciso criar um grid com 4 tabelas dentro de um fieldset, que deve ter 2 linhas com duas tabelas cada. Mas em vez de colocar duas tabelas lado a lado nas linhas, o código cria uma nova linha para cada tabela, fazendo com que todas elas fiquem uma em cima da outra, como corrijo isso? Segue o código abaixo: ---HTML---
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<link rel="stylesheet" type="text/css" href="Teste.css"/>
</head>
<body>
<fieldset id="field">
<legend>Tabelas</legend>
<div class="container">
<div class="row">
<div class="col">
<table id="tabela1">
<tr>
<th colspan="2">Tabela 1</th>
</tr>
<tr>
<td id="item">Linha 1</td>
<td id="quant"></td>
</tr>
<tr>
<td id="item">Linha 2</td>
<td id="quant"></td>
</tr>
<tr>
<td id="item">Linha 3</td>
<td id="quant"></td>
</tr>
<tr>
<td id="item">Linha 4</td>
<td id="quant"></td>
</tr>
</table>
</div>
<div class="col">
<table id="tabela2">
<tr>
<th colspan="2">Tabela 2</th>
</tr>
<tr>
<td id="item">Linha 1</td>
<td id="quant"></td>
</tr>
<tr>
<td id="item">Linha 2</td>
<td id="quant"></td>
</tr>
<tr>
<td id="item">Linha 3</td>
<td id="quant"></td>
</tr>
<tr>
<td id="item">Linha 4</td>
<td id="quant"></td>
</tr>
</table>
</div>
<div class="w-100"></div>
<div class="col">
<table id="tabela3">
<tr>
<th colspan="2">Tabela 3</th>
</tr>
<tr>
<td id="item">Linha 1</td>
<td id="quant"></td>
</tr>
<tr>
<td id="item">Linha 2</td>
<td id="quant"></td>
</tr>
<tr>
<td id="item">Linha 3</td>
<td id="quant"></td>
</tr>
<tr>
<td id="item">Linha 4</td>
<td id="quant"></td>
</tr>
</table>
</div>
<div class="col">
<table id="tabela4">
<tr>
<th colspan="2">Tabela 4</th>
</tr>
<tr>
<td id="item">Linha 1</td>
<td id="quant"></td>
</tr>
<tr>
<td id="item">Linha 2</td>
<td id="quant"></td>
</tr>
<tr>
<td id="item">Linha 3</td>
<td id="quant"></td>
</tr>
<tr>
<td id="item">Linha 4</td>
<td id="quant"></td>
</tr>
<tr>
<td id="item">Linha 5</td>
<td id="quant"></td>
</tr>
</table>
</div>
</div>
</div>
</fieldset>
</body>
</html>
---CSS---
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 1px 1px;
grid-template-areas: ". ." ". .";
}
table{
background-color: white;
border: 1px solid white;
}
th {
width: 100%;
background-color: #9A56A2;
font-size: 14px;
padding: 2px;
color: white;
}
tr:nth-child(even) {
background-color: #E3D9E5;
}
tr:nth-child(odd) {
background-color: #F5EEF6;
}
#item{
font-family: 'Bahnschrift';
font-size: 10px;
padding-left: 5px;
height: 20px;
width: 208px;
}
#quant{
font-family: 'Bahnschrift';
font-size: 10px;
width: 60px;
height: 20px;
padding-left: 5px;
}
legend {
text-align: center;
font-size: 14px;
width: 57px;
}
#field{
border: 1px solid #8E4996;
margin: auto;
width: 800px;
}