Sim Posted November 20, 2020 Share Posted November 20, 2020 (edited) H body { display: flex; align-items: center; justify-content: center; flex-direction: column; min-height: 100vh; padding: 4rem 0; font-family: -system-ui, -apple-system, BlinkMacSystemFont, sans-serif; } table { width: 100%; max-width: 50rem; tr:nth-child(even) th { color: #ccc; font-weight: normal; } th, td { padding: 0.5rem 1rem; } th { font-weight: normal; border-top: thin dotted #ccc; } td { font-size: 0.8rem; font-weight: bold; line-height: 1.4; border-radius: 0.2rem; transition: opacity 0.3s ease; } td > span { font-size: 0.8em; font-weight: normal; display: block; width: 100%; } } .stage-earth {background-color: #FFA726}; .stage-mercury {background-color: #9CCC65}; .stage-venus {background-color: #FF8A65}; .stage-mars {background-color: #B3E5FC}; .stage-jupiter {background-color: #81D4FA}; .stage-saturn {background-color: #26C6DA}; If I use this css file for a module, is it going to apply to whole site. I think it will, so with that said, what is my easiest solution to fix so it wouldn't effect any other areas of the page. Edit: and the stage- classes don't seem to work <td colspan="4" rowspan="2" class="stage-saturn">Drinks</td> To make things a bit stranger the stage-earth one works. Edited November 20, 2020 by Sim 1 Quote Link to comment Share on other sites More sharing options...
URBANZ Posted November 20, 2020 Share Posted November 20, 2020 (edited) The markup is incorrect add } before tr:nth-child(even) th { remove } before .stage-earth { remove the ; after all the .stage-* Edited November 20, 2020 by urbanmafia 1 Quote Link to comment Share on other sites More sharing options...
Sim Posted November 20, 2020 Author Share Posted November 20, 2020 I did that 🙂 thanks 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.