0

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>

3
  • 1
    a tabela naturalmente fica com as colunas lado a lado, remove os atributos que podem mudar esse comportamento, como por exemplo o display: flex Commented 17/11/2022 às 14:30
  • 1
    outra coisa, "#selections" é uma "TR", está adicionando TR dentro de TR, deveria adicionar as linhas ao TBODY Commented 17/11/2022 às 14:33
  • Muito obrigado, @RicardoPontual! Depois de fazer conforme falou só foi preciso aplicar um display: flex na <td class= "selection" e eu consegui deixar como queria, valeu mesmo! Commented 18/11/2022 às 16:17

0

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

Pesquise outras perguntas com a tag .