css - How to add border for html tr -


suppose defined such table

1    chailie     23  joker   bass 2    chailie     23  joker   bass 3    chailie     23  joker   bass 4    chailie     23  joker   bass 5    chailie     23  joker   bass 6    chailie     23  joker   bass 

now want make looks this

|----------------------------------------| |1   chailie     23  joker   bass        | |2   chailie     23  joker   bass        | |3   chailie     23  joker   bass        | |----------------------------------------| |4   chailie     23  joker   bass        | |5   chailie     23  joker   bass        | |6   chailie     23  joker   bass        | |----------------------------------------| 

as see,i's add border part of tr , make looks been grouped, know how achieve this?e.g can add kinda of css set such border?

try :nth-child css property

tr:nth-child(3n+0) {   background-color: lime; } tr:nth-child(3n+0) td {   border-top :1px dashed blue; } 

working demo

more updated after reading comments, try this

tr:nth-child(3n+1) td {   border-top : 1px dashed blue; } td:first-child  {   border-left : 1px dashed blue; } td:last-child  {   border-right : 1px dashed blue; } 

working demo

alternative way: ( cross browser compatible)

tr:nth-child(3n+1) td {   border-top : 1px solid grey;  } table {     border-right:1px solid grey;      border-left: 1px solid grey;  } 

alternative method demo


Comments

Popular posts from this blog

linux - xterm copying to CLIPBOARD using copy-selection causes automatic updating of CLIPBOARD upon mouse selection -

c++ - qgraphicsview horizontal scrolling always has a vertical delta -