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
Post a Comment