Bonxy Posted March 30, 2022 Share Posted March 30, 2022 (edited) Hey, I'm having as issue which also appears in the TryIt editor. I don't know if its meant to work like I expected or it isn't. I'm trying to change the table header colour to "w3-flat-peter-river" (https://www.w3schools.com/w3css/w3css_color_flat.asp) which I've referenced from the w3-colors-flat.css stylesheet. The problem is, when the code is run, it just shows a white box with white font. If you change the colour to "w3-red" it works fine. Can you not use flat colours as table headers? Thanks. <!DOCTYPE html> <html> <title>W3.CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link rel="stylesheet" href="https://www.w3schools.com/lib/w3-colors-flat.css"> <body> <div class="w3-container"> <h2>Colored Table Heading</h2> <p>Use any of the w3-<em>color</em> classes to display a colored row:</p> <table class="w3-table-all"> <thead> <tr class="w3-flat-peter-river"> <th>First Name</th> <th>Last Name</th> <th>Points</th> </tr> </thead> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>Adam</td> <td>Johnson</td> <td>67</td> </tr> </table> </div> </body> </html> Edited March 30, 2022 by Bonxy Spelling Link to comment Share on other sites More sharing options...
Ingolme Posted March 30, 2022 Share Posted March 30, 2022 The problem is that the w3-table-all class is setting the background color of the row to white because it has a more specific selector. You could apply the background to the table cells instead of the row instead. <thead> <tr> <th class="w3-flat-peter-river">First Name</th> <th class="w3-flat-peter-river">Last Name</th> <th class="w3-flat-peter-river">Points</th> </tr> </thead> Link to comment Share on other sites More sharing options...
Bonxy Posted March 31, 2022 Author Share Posted March 31, 2022 Hey @Ingolme, Thanks for your reply. Do you think it should work how i expected it too or is it working as expected. I thought that flat colours and the W3.CSS colours could all work with any of the W3.CSS classes. Thanks, Sam Link to comment Share on other sites More sharing options...
Ingolme Posted March 31, 2022 Share Posted March 31, 2022 Whenever you have different CSS classes on the same element, they're competing with each other to style the element. When one class wants to color the element blue and the other class wants to color it white, the browser has to choose one of those colors. They way it's chosen is shown in this tutorial page: https://www.w3schools.com/css/css_specificity.asp Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now