Как скруглить края у таблицы (border-radius)

#css3 #html #html5 #css

    

        

            

                
ID
                
Название
                
Цена
                
Цвета
                
Продажи
            
        
        

            

                
1
                
Name
                
50$
                
Black, White
                
104
            
            

                
2
                
Name
                
70$
                
Red, Blue, Grey
                
255
            
        
    

Нужно скруглить края у всей таблицы. Я уже как не пытался, к чему не применял...
Я у первого td скгруглить пытался, у tr пытался. У всей таблице, понятно, не применяется.
В общем все никак. Помогите, пожалуйста    

Ответы

Ответ 1

А на самом деле для кросс-браузерности вот так:):
.table_block {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -khtml-border-radius: 10px;
  border: 1px solid #000;
  display: block;
}​

Хотя наверно мой ответ уже неактуален.


Ответ 2

Насколько я помню, проблема глубже чем расстановка вендерных префиксов. border-radius
конфликтует с border-collapse: collapse, которое, скорее всего используется. Я решал
это двумя способами:


отказаться от border-collapse: collapse, а бордюры внутри таблицы рисовать ячейкам.
Скажежм правый и нижний, а добивать first-child`ами.


не отказываться от border-collapse: collapse, но отказываться от вненего бордюра
таблицы. Таблицу помещать в div. div`у рисовать бордюр и скруглять его.


P.S. Правда сейчас повторить не удается проблему :)


Ответ 3

Попробуйте так:
.table_block {
  border-radius: 10px;
  border: 1px solid #000;
  display: block;
}​

Демо


Ответ 4

Если ты пробуешь сделать в Internet Explorer у тебя ничего не выйдет. В нем нужно
использовать картинки - а в других браузерах должно работать как написано ниже.
Прямо в теге прописан стиль:
  

            

                

                    
ID
                    
Название
                    
Цена
                    
Цвета
                    
Продажи
                
            
            

                

                    
1
                    
Name
                    
50$
                    
Black, White
                    
104
                
                

                    
2
                    
Name
                    
70$
                    
Red, Blue, Grey
                    
255
                
            
        

И стиль прописан в классе:

  

        

            

                
ID
                
Название
                
Цена
                
Цвета
                
Продажи
            
        
        

            

                
1
                
Name
                
50$
                
Black, White
                
104
            
            

                
2
                
Name
                
70$
                
Red, Blue, Grey
                
255
            
        
    


Ответ 5

Можно ещё проще:    

table{ overflow: hidden; border-radius: 6px;}


Ответ 6

.table_block {
  border-radius: 10px;
  border: 1px solid #000;
}​


Ответ 7

border-radius: 20px;
overflow: hidden;