Cверстать таблицу на css, как закруглить углы свойством border-radius?

Question

[nikita1122]

В учебном проекте не могу сверстать вот такую таблицу. У нее есть закругленные углы, но свойство border-radius не работает вместе со свойством border-collapse: collapse. пробовал верстать со свойством border-collapse: separate, но так получается что попало. Натолкните на путь истинный неумеху) Пожалуйста!)

Answer 1

[Степан Крапивин]

border-radius + overflow: hidden у таблицы

https://codepen.io/xevin/pen/ZEoEwdm

Comments

[nikita1122]

в таблице есть border. его не скругляет. скругление работает только на фон ячеек.
в общем выходит как на скриншоте. я уже устал с этими бордерами воевать(

[Степан Крапивин]

nikita1122, убери у таблицы обводку. Обводку добавь ячейкам

Answer 2

[Alibek Kulseitov]

th { border-radius: 6px;} черные плашки это table head