html5 - CSS table background is rounded but borders are squared -


i trying create table has rounded top borders on either side, rest of table's borders squared.

when apply css border remain squared, background-color does rounded off, creates weird look:

table {border-collapse:collapse} th {border-top:1px solid red; width:70px} th, td {text-align:left; background-color:#cccccc} th.header1 {border-top:1px solid red; border-left:1px solid red; border-top-left-radius:20px} th.header2 {border-top:1px solid red; border-right:1px solid red; border-top-right-radius:20px} 

the result this: enter image description here

how 'round' borders in top left/right header cells please red border follows background?

please see jsfiddle working example.

this because border collapsed with:

css

table {     border-collapse: collapse; } 

look @ quick fix.


Comments

Popular posts from this blog

image - ClassNotFoundException when add a prebuilt apk into system.img in android -

I need to import mysql 5.1 to 5.5? -

Java, Hibernate, MySQL - store UTC date-time -