I'm having a hard times table in HTML & CSS

Question

I'm trying to use justify-content: space-between on this project, but nothing is changing IDK why. I tried many ways, after few days, I`m done trying alone, can anyone help me? I'd appreciate it if you could help me

My project: https://github.com/Renan-Olovics/NLW_04-MoveIt

This is the wrong way, as I did.

and should be like that (the blue on right)

HTML:

import Head from 'next/head'
import SideBar from '../components/SideBar/Index'
import { LeaderboardApi } from '../services/leaderboardApi'
import styles from '../styles/leaderboard.module.scss'

interface usersProps {
  id: string
  git: string
  name: string
  level: number
  challenges: number
  experience: number
}
interface leaderboardProps {
  leaderboardList: Array<usersProps>
}

export default function Leaderboard(props: leaderboardProps) {
  return (
    <div className={styles.leaderboardPage}>
      <Head>
        <title>Início | Leaderboard</title>
      </Head>
      <SideBar />
      <div className={styles.container}>
        <h1>Leaderboard</h1>

        <table>
          <thead>
            <tr>
              <th>POSIÇÃO</th>
              <th>
                <section>
                  <p>USUÁRIO</p> <p>EXPERIÊNCIA</p>
                </section>
              </th>
            </tr>
          </thead>
          <tbody>
            {props.leaderboardList.map((data) => {
              return (
                <tr key={data.id}>
                  <th>
                    <h3>1</h3>
                  </th>

                  <th className={styles.userInfo}>
                    <img
                      src={`http://www.github.com/${data.git}.png`}
                      alt={data.name}
                      width={64}
                      height={64}
                    />

                    <div className={styles.batata}>
                      <section>
                        <h3>{data.name}</h3>
                        <p>
                          <img src="/icons/level.svg" alt="levelIcon" />
                          {` Level ${data.level}`}
                        </p>
                      </section>

                      <section>
                        <p>{data.challenges}</p>
                        <p className={styles.blueText}>completados</p>
                        <p>{data.experience}</p>
                        <p className={styles.blueText}>xp</p>
                      </section>
                    </div>
                  </th>
                </tr>
              )
            })}
          </tbody>
        </table>
      </div>
    </div>
  )
}

export async function getStaticProps() {
  const { data } = await LeaderboardApi.get('users', {
    params: {
      _limit: 10,
      _sort: 'level',
      _order: 'desc',
    },
  })

  const leaderboardList = data.map((leaderboard) => {
    return {
      id: leaderboard.id,
      git: leaderboard.git,
      name: leaderboard.name,
      level: leaderboard.level,
      challenges: leaderboard.challenges,
      experience: leaderboard.experience,
    }
  })

  return {
    props: {
      leaderboardList,
    },
    revalidate: 60 * 10, //  10min
  }
}

CSS:

.leaderboardPage {
  display: flex;
  background-color: var(--background);
}

.container {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin: 0 20rem 0 20rem;

  h1 {
    padding: 3rem;
  }

  thead {
    th {
      text-transform: uppercase;
      color: #666666;
      padding-bottom: 1rem;
    }
    th:last-child {
      section {
        display: flex;
        justify-content: space-between;
        p {
          padding: 0 5rem 0 5rem;
        }
      }
    }
  }

  tbody {
    th {
      align-items: center;
      height: 7rem;
    }

    th:last-child {
      width: 100%;
    }

    img {
      border-radius: 50%;
    }
    tr {
      background: orange;
    }
  }
  .blueText {
    color: var(--blue);
  }
}

.userInfo {
  display: flex;
  margin-left: 1rem;
  background: green;

  div {
    display: flex;

    section:first-child {
      display: flex;
      flex-direction: column;
      background: yellow;
      align-self: flex-start;
    }
    section:last-child {
      display: flex;
      background: blue;
      align-self: center;
      justify-content: space-between;
    }
  }
}

.batata {
  display: flex;
}

Answer 1

This will be useful.Please try out this.

 To .batata, add width: 100%; and justify-content: space-between;

I'm having a hard times table in HTML & CSS

Question

1 answers

solution1
0 ACCPTED 2021-06-07 13:11:33

I'm having a hard times table in HTML & CSS

Question

1 answers

solution1 0 ACCPTED 2021-06-07 13:11:33

solution1
0 ACCPTED 2021-06-07 13:11:33