Eu estou tentando posicionar os números "0" ao lado das seleções mas não estou conseguindo. Manipulei o document com JS e ficou dessa forma. Antes de inserir o JS a primeira linha estava correta, agora não sei como colocar os números ao lado das seleções e abaixo das estatísticas.
function createLine(color, position, flags, name, ) {
return `
<tr id="selections">
<td class="selection">
<div class="classified" style="background-color: ${color}"></div>
<div>${position}</div>
<div><img src="./../assets/icon=${flags}.svg" /></div>
<span>${name}</span>
</td>
<td class="number">0</td>
<td class="number">0</td>
<td class="number">0</td>
<td class="number">0</td>
<td class="number">0</td>
<td class="number">0</td>
<td class="number">0</td>
<td class="number">0</td>
</tr>
`
}
document.querySelector("#selections").innerHTML =
createLine("#7b1e3e", "1", "qatar", "Catar") +
createLine("#7b1e3e", "2", "ecuador", "Equador") +
createLine("#000", "3", "senegal", "Senegal") +
createLine("#000", "4", "netherlands", "Holanda")
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body * {
font-family: "Roboto", sans-serif;
}
h3 {
padding: 16px;
}
th {
width: 25px;
min-width: 25px;
height: 12px;
}
td {
display: flex;
gap: 10px;
border-bottom: 1px solid #9aa0a6;
border-top: 1px solid #9aa0a6;
}
#main {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.container {
border-spacing: 0;
border-radius: 6px;
background-color: #1d1c19;
color: #ffff;
}
.team {
text-align: left;
padding: 8px 16px 8px;
}
.selection img {
width: 29px;
}
.selection {
width: 400px;
}
.selection div,
span {
padding-top: 8px;
}
.classified {
width: 3px;
height: 40px;
background-color: #7b1e3e;
}
.info {
padding-left: 3px;
padding-right: 3px;
height: 12px;
}
.number {
font-size: 14px;
height: 40px;
text-align: center;
vertical-align: middle;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tabela de Classificação</title>
<link rel="stylesheet" href="./../css/standing.css" />
<link rel="shortcut icon" href="./../assets/2022_FIFA_World_Cup.svg" type="image/x-icon" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@700;900&display=swap" rel="stylesheet" />
</head>
<body>
<div id="main">
<h3>Grupo A</h3>
<table class="container">
<tr>
<th class="team">
<div>Equipe</div>
</th>
<th class="info">
<div>
<span>Pts</span>
</div>
</th>
<th class="info">
<div>
<span>PJ</span>
</div>
</th>
<th class="info">
<div>
<span>VIT</span>
</div>
</th>
<th class="info">
<div>
<span>E</span>
</div>
</th>
<th class="info">
<div>
<span>DER</span>
</div>
</th>
<th class="info">
<div>
<span>GM</span>
</div>
</th>
<th class="info">
<div>
<span>GC</span>
</div>
</th>
<th class="info">
<div>
<span>SG</span>
</div>
</th>
</tr>
<tr id="selections">
<td class="selection">
<div class="classified"></div>
<div>1</div>
<div><img src="./../assets/icon=qatar.svg" /></div>
<span>Catar</span>
</td>
<td class="number">0</td>
<td class="number">0</td>
<td class="number">0</td>
<td class="number">0</td>
<td class="number">0</td>
<td class="number">0</td>
<td class="number">0</td>
<td class="number">0</td>
</tr>
</tr>
</table>
</div>
<script src="./JS/main-standings.js"></script>
</body>
</html>
display: flex
display: flex
na<td class= "selection"
e eu consegui deixar como queria, valeu mesmo!