Grid de Tabelas CSS criando novas linhas quando não deveria
Stack Overflow em Português Asked by nicolas.gordiano on November 5, 2021
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;
}
One Answer
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!
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>Answered by hugocsl on November 5, 2021
Add your own answers!
Ask a Question
Get help from others!
Recent Questions
- How can I transform graph image into a tikzpicture LaTeX code?
- How Do I Get The Ifruit App Off Of Gta 5 / Grand Theft Auto 5
- Iv’e designed a space elevator using a series of lasers. do you know anybody i could submit the designs too that could manufacture the concept and put it to use
- Need help finding a book. Female OP protagonist, magic
- Why is the WWF pending games (“Your turn”) area replaced w/ a column of “Bonus & Reward”gift boxes?
Recent Answers
- haakon.io on Why fry rice before boiling?
- Peter Machado on Why fry rice before boiling?
- Lex on Does Google Analytics track 404 page responses as valid page views?
- Jon Church on Why fry rice before boiling?
- Joshua Engel on Why fry rice before boiling?