Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Anthony Domina
Courses Plus Student 19,571 Pointstfoot in my table has a border I cannot get rid of
I tried creating my own website using the HTML and CSS courses at Treehouse. I created a table that has a border. The tfoot (or table footer) has a border as well and I do not want one. How do I get rid of it? I have tried applying border rules on tfoot in my CSS stylesheet. I have even tried inline styles on tfoot itself but to no avail. My assumption is that something is overriding any border removing attempt I make. I would appreciate any feedback or ideas! Thanks!
Here is my html:
<div> <table> <caption class="tableHeader">Facts about me</caption> <thead> <tr> <th>Activity</th> <th>Achievements</th> </tr> </thead> <tfoot> <tr> <td colspan="2"> Be sure to check out all my travel pictures if you want to see more!</td> </tr> </tfoot> <tbody> <tr> <th>Traveling</th> <td>Visited Japan, China, Thailand, South Korea, Mexico, Canada, and Turkey</td> </tr> <tr> <th>Collecting HRC shot glasses</th> <td>Have acquired 50+ Hard Rock Cafe shot glasses to date!</td> </tr> <tr> <th>Running</th> <td>Completed 2 half marathons in 2017</td> </tr> <tr> <th>Learning Japanese</th> <td>Passed the JLPT N3 proficiency test</td> </tr> </tbody> </table> </div>
here is my CSS
table, th, td { border: 1px solid black; padding: 10px; color: #000; }
tfoot { font-style: italic; color: lightgrey; }
.tableHeader { font-family: 'Changa One', sans-serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; color: black; }
5 Answers
Anthony Domina
Courses Plus Student 19,571 PointsI am almost 100% satisfied now that I did what is shown below. My mistake, I believe, was in targeting "table" when what I should've gone after was the "thead" and "tbody" tags. Now my table footer has no border. Hooray!
thead, tbody, th { border: 1px solid black; padding: 10px; color: #000; }
tfoot, td { border: none; font-style: italic; }
Bryce Santos
11,157 PointsAdd this to your CSS
tfoot td { border: none; }
it's because you have all "td"s set to have a border
Anthony Domina
Courses Plus Student 19,571 PointsBryce, thank you for the suggestion. I tried it but the best I could accomplish was removing the border from all the td's.
table, th, td { border: 1px solid black; padding: 10px; color: #000; }
tfoot, td { border: none; font-style: italic; }
Bryce Santos
11,157 PointsDon't put a comma in between tfoot and td or it treats it as separate tags. You want to target the td within the tfoot.
Anthony Domina
Courses Plus Student 19,571 PointsGood call. Thank you!
Anthony Domina
Courses Plus Student 19,571 PointsOkay, this 100% gave me exactly what I wanted. Bryce, thank you for your suggestions! The comma between th and td ironically is giving me what I want there.
thead { border: 1px solid black; padding: 10px; color: #000; }
tbody { border: 1px solid black; padding: 10px; color: #000; }
th, td { border: 1px solid black; padding: 10px; color: #000; }
tfoot td { border: none; font-style: italic; }