How to get css background color on tr tag to span entire row

Question

I have tried everything I can think of in css in order to get a background color to span an entire table row   lt tr gt  tag  But I keep getting a white border around each  cell   CSS  excerpt      alternating row   table  tr  td  th  margin 0 border 0 padding 0   tr rowhighlight  background-color  f0f8ff margin 0 border 0 padding 0     HTML  excerpt     lt tr class  rowhighlight  gt  lt td gt A lt  td gt  lt td gt B lt  td gt  lt td gt C lt  td gt  lt  tr gt    It just does not want to cooperate  Thanks for helping

User · Answer

This worked for me  even within a div         div cntrblk tr hover td           line-height  150           background-color  rgb 255 0 0           font-weight  bold          font-size  150           border  0            It selected the entire row  but I d like it to not do the header  haven t looked at that yet   It also partially fixed the fonts that wouldn t scale-up with the hover    Apparently you to have apply settings to the cell not the row  but select all the component cells with the tr hover   On to tracking down the in-consistent font scaling problem   Sweet that CSS will do this

User · Answer

Firefox and Chrome are different Chrome ignores the TR s background-color Example  http   jsfiddle net T4NK3R 9SE4p      lt tr style  background-color  F00  gt        lt td style  background-color  FFF  border-radius 20px  gt   lt  tr gt      In FF the TD gets red corners  in Chrome not

User · Answer

Try this        rowhighlight  gt  td   background  green

User · Answer

I prefer to use border-spacing as it allows more flexibility  For instance  you could do  table     border-spacing  0 2px      Which would only collapse the vertical borders and leave the horizontal ones in tact  which is what it sounds like the OP was actually looking for   Note that border-spacing  0 is not the same as border-collapse  collapse  You will need to use the latter if you want to add your own border to a tr as seen here

User · Answer

Removing the borders should make the background color paint without any gaps between the cells  If you look carefully at this jsFiddle  you should see that the light blue color stretches across the row with no white gaps   If all else fails  try this   table   border-collapse  collapse

User · Answer

table border-collapse collapse

User · Answer

Have you tried setting the spacing to zero     alternating row   table  tr  td  th  margin 0 border 0 padding 0 spacing 0   tr rowhighlight  background-color  f0f8ff margin 0 border 0 padding 0 spacing 0

User · Answer

tr rowhighlight td  tr rowhighlight th      background-color  f0f8ff

[html] How to get css background color on <tr> tag to span entire row

Examples related to html

Examples related to css

Examples related to background-color