CSS Derp - React Leaderboard [Solved]

[JacksonBates]

Help me un-derp my CSS please!

Project: https://jacksonbates.github.io/fcc-leaderboard-react/public/
Code: https://github.com/JacksonBates/fcc-leaderboard-react
Culprit(?): https://github.com/JacksonBates/fcc-leaderboard-react/blob/master/src/styles/components/_table.scss

When I click between the recent and all time table headings, the content shifts slightly and it drives me nuts.

I think the problem is caused by the length of the username on the 30 Days table, #17 (AreospaceEngineerBadass), but I’m having a bear of a time trying to get the table to behave.

So please someone put me out of my CSS misery before I throw my damn laptop out the window.

(Ps. Apologies if it renders slowly - this is the unminified pre-dist build…it might be sluggish.)

[kevcomedia]

It looks like the table shifts anyway even with the stylesheets off.

How about fixing the widths of each <td>? Like with these values:

td:first-child {
  width: 20px;  
}

td:nth-child(2) {
  width: 50px;
}

td:nth-child(4),
td:nth-child(5) {
  width: 150px;
}

[JacksonBates]

@kevcomedia

td:first-child {
width: 20px;
}

td:nth-child(2) {
width: 50px;
}

td:nth-child(4),
td:nth-child(5) {
width: 150px;
}

You beauty! That works. Quite a simple fix really, but I’m dreadful at thinking through CSS…I’m too piecemeal in my approach, I think.

I’ll tinker with it a bit more to be responsive - but that’s a good insta-solution.

Thanks, Kev!

[noyb]

A fixed min-width on the name’s td seems to be enough as well:

tr > td:nth-child(3) {
    min-width: 200px;
}

[JacksonBates]