0

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;
}

1 Resposta 1

0

Cara o display:grid nesse caso tem que estar na .row, e não no .container! O "grid container" tem que ser sempre o PAI direto dos filhos que vc quer distribuir, e não o AVÔ... (A não ser que vc esteja usando sub-grid, mas obviamente não é esse o caso aqui)

Além disso, vc colocou uma div vazia meio sem sentido entre as duas primeiras divs e as duas últimas! Não vejo necessidade dela!

inserir a descrição da imagem aqui

Olha ai o código da imagem acima:

<!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" />
<style>
  .row {
    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;
  }
</style>
</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>

2
  • 1
    Obrigado pela explicação. Problema resolvido. Commented 21/07/2020 às 12:28
  • @nicolas.gordiano sem problemas, que bom que resolveu ai
    – hugocsl
    Commented 21/07/2020 às 13:07

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .