CSS selectors have no effect
Question
This is a crappy issue and I am truly sorry to ask this. But I have been programming PHP for hours and now trying to display it on a simple html layout. I need more coffee and my eyes are tired, woke up too early...
Anyway the issue is, that for some reason my css styles that should affect the text stylings has no effect what so ever on the layout. Which is a bit odd that the border settings and paddings do work, but font-weight or the background-color does not.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Visitor logs</title> <style> html { } body { } .first_row { font-weight: bold; background-color: red; } td { padding: 4px 8px 4px 4px; border-bottom: 1px solid black; } </style> </head> <body> <table> <tr class="first_row"> <td>IP-address</td> <td>Last visited</td> <td>Rough location</td> </tr> </table> </body> </html>
3 answers
solution1
2 2017-10-04 04:26:13
Add this code:
table {
border-collapse: collapse;
}
table { border-collapse: collapse; } .first_row { font-weight: bold; background-color: red; } td { padding: 4px 8px 4px 4px; border-bottom: 1px solid black; }
<table> <tr class="first_row"> <td>IP-address</td> <td>Last visited</td> <td>Rough location</td> </tr> <tr class="second_row"> <td>IP-address2</td> <td>Last visited2</td> <td>Rough location2</td> </tr> </table>
See This Also:
table { border-collapse: collapse; } .first_row { font-weight: bold; background-color: red; } tr:not(.first_row) td:not(:first-child) { border-left: 1px solid #000; } td { padding: 4px 8px 4px 4px; border-bottom: 1px solid black; }
<table> <tr class="first_row"> <td>IP-address</td> <td>Last visited</td> <td>Rough location</td> </tr> <tr class="second_row"> <td>IP-address2</td> <td>Last visited2</td> <td>Rough location2</td> </tr> </table>
solution2
0 2017-10-04 04:53:18
You can used thead with th for heading of table
table { border-collapse: collapse; } table th { font-weight: bold; background: red; padding:4px; border-bottom: 1px solid black; } td { padding: 4px 8px 4px 4px; border-bottom: 1px solid black; }
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Visitor logs</title> </head> <body> <table> <thead> <tr> <th>IP-address</th> <th>Last visited</th> <th>Rough location</th> </tr> </thead> <tr> <td>text</td> <td>text</td> <td>text</td> </tr> </table> </body> </html>
solution3
-1 2017-10-04 04:46:20
Add cellspacing="0" cellpadding="0" in table tag or add table{border-collapse: collapse;} in your css.
.first_row { font-weight: bold; background-color: red; } td { padding: 4px 8px 4px 4px; border-bottom: 1px solid black; }
<table cellspacing="0" cellpadding="0"> <tr class="first_row"> <td>IP-address</td> <td>Last visited</td> <td>Rough location</td> </tr> </table>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.