HTML5 CSS3 таблица с закругленными краями

HTML5 CSS3 таблица с закругленными краями

Скругление краев не работает с таблицами, у которых border-collapse:collapse. Т.е. вот так не работает:

table.cal-table{	
   border-collapse: collapse;
   border: 3px solid #fff;
   border-radius: 8px;
   -moz-border-radius: 8px;
   -webkit-border-radius: 8px;
   -khtml-border-radius: 8px;
}

Лечится это селекторами угловых td-шек:

table.cal-table tr:last-child td:first-child {
   -moz-border-radius-bottomleft:8px;
   -webkit-border-bottom-left-radius:8px;
   border-bottom-left-radius:8px;
   -khtml-border-bottom-left-radius: 8px;
   border:1px solid red;
}
table.cal-table tr:last-child td:last-child {
   -moz-border-radius-bottomright:8px;
   -webkit-border-bottom-right-radius:8px;
   border-bottom-right-radius:8px
   -khtml-border-bottom-right-radius: 8px;
   border:1px solid red;
}

Похожие записи

• Работа с массивами в jquery
• Рисование на canvas'е
• jQuery.animate и css transform
• Проверка поддержки элементов html5 в браузере