CSS Grid Tables creating new lines when they shouldn’t

Asked

Viewed 58 times

0

I need to create a grid with 4 tables within a fieldset, which should have 2 rows with two tables each. But instead of putting two tables side by side on the lines, the code creates a new row for each table, making them all stand on top of each other, how do I fix this? Follow the code below: --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;
}
css table grid

1 answer

0


Guy the display:grid then you have to be in .row, and not in the .container! The "grid container" always has to be the direct FATHER of the children you want to distribute, and not the GRANDFATHER... (Unless you’re wearing it sub-grid, but obviously that’s not the case here)

Besides, you put a div empty half meaningless between the first two divs and the last two! I see no need for it!

inserir a descrição da imagem aqui

Look at the image code above:

<!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>

  • 1

    Thanks for the explanation. Problem solved.

  • @Don’t worry, I’m glad you solved it there

Browser other questions tagged css table grid

You are not signed in. Login or sign up in order to post.