Im trying to add a line between each row in a table but its not working. Lines are not being displayed.
Here is my html -
<tr class="myline">
Here is my css -
.myline TR {border-bottom:1px solid gray}
Thanks
Add a comment
|
2 Answers
your css references a TR child of .myline, do this:
tr.myline{border-bottom:1px solid gray;}
or even better, applying the class to the table not the trs
table.myline tr{border-bottom:1px solid gray;}
7 Comments
blue-sky
I'm trying both methods above but they dont seem to work. Do I reference the class within the tr tag the same way ? - <tr class="myline">
JCOC611
With the first one you do reference the class exactly the same. However, with the second one you would do this:
<table class="myline"><tr><td></td></tr></table> (adding the class to the table instead of the TRs)blue-sky
This doesnt seem to be working, no lines are being drawn - here is my code . thanks - <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <style> .myline {width:100%} .myline tr {border-bottom:1px solid gray} </style> </head> <body> <div class="myline"> <table class="myline"> <tr><td>sdsdw</td></tr> <tr><td>sdsdw</td></tr> <tr><td>sdsdw</td></tr> </table> </div> </body> </html>
blue-sky
This works, im not sure why. <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <style> table.myline {width:100%} table.myline td {border-bottom:1px solid gray} </style> </head> <body> <table class="myline"> <tr><td>sds33d1w</td></tr> <tr><td>sdsdw</td></tr> <tr><td>sdsdw</td></tr> </table> </body> </html>
JCOC611
on the wrapper div, don't use the class
myline. So <div><table class="myline"><tr><td>hey</td></tr></div> |
If no other styles affect the table your code should work. http://jsfiddle.net/MS4Qm/
3 Comments
JCOC611
Assuming what the OP posted is right, he's applying the style to the
tr nodes, not the table one as you are on the fiddle.JCOC611
But he, I think, didn't set the equivalent to
myline2 class. In other words, remove the .myline2 and set the second table's classes to myline
gearsdigital
I missread it... this code should NOT work as you mentioned above (your css references a TR child of .myline, do this:). Exclude he has nested tables. Sorry for that.