css - Table header with rounded corners and border -


i s possible table headers have rounded corners , 1px border?

when apply border doesn't apply to rounded corners, actual table border, border corners square.

how can this?

here's css:

.example th { border: 1px solid #ddd; background: #444; background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd)); background: -moz-linear-gradient(top,  #eee,  #ddd); filter:  progid:dximagetransform.microsoft.gradient(startcolorstr='#eee', endcolorstr='#ddd'); color: #444;     } 

the rounded corners applied first , list child th: -moz-border-radius: 6px 0 0 0; -webkit-border-radius: 6px 0 0 0; border-radius: 6px 0 0 0;

this makes all table headers (if using semantic th cells instead of body td cells) have rounded corners, if wish selected tables - rename class table.rounded th , add rounded class tables:

th {  -khtml-border-radius: 4px 4px 4px 4px; -moz-border-radius: 4px 4px 4px 4px; -ms-border-radius: 4px 4px 4px 4px; -o-border-radius: 4px 4px 4px 4px; -webkit-border-radius: 4px 4px 4px 4px; border-radius: 4px 4px 4px 4px; border: solid 1px black; } 

edit: need have border-collapse: separate; on table possible...


Comments

Popular posts from this blog

jquery - Invalid Assignment Left-Hand Side -

java - Play! framework 2.0: How to display multiple image? -

gmail - Is there any documentation for read-only access to the Google Contacts API? -