Блог

Я хочу, чтобы у моей b-таблицы были закругленные границы Я перепробовал несколько разных решений, которые я нашел в Интернете, но у меня все еще ничего не получилось

Для справки, это то, как я хочу, чтобы моя таблица выглядела с точки зрения границ:-

И это моя текущая таблица:-

для моего CSS я использовал следующее:-

 .content-table {
border-collapse: separate;
margin: 25px 0;
font-size: 0.9em;
min-width: 400px;
overflow: hidden;
border: 2px solid #5B5B5B;
border-radius: 15px;
background-color: #5B5B5B;
border-spacing: 0;
}
 

Однако, как показывает мое текущее изображение таблицы, это означает, что мои строки не имеют верхних или нижних заголовков
Я также пробовал использовать border-collapse: collapsed без border-spacing 0 , но тогда я получу такой результат:-

Тем не менее, это также проблема, из-за которой граница распространяется по всем углам. Любая помощь будет высоко оценена!

Добавить закругленные границы в таблицу немного сложнее,

 table { position:relative;max-width:600px }

table::after {
  content: " ";
  inset: 0;
  border: solid #000 1px;
  position: absolute;
  border-radius: 20px;
}
 

ДЕМОНСТРАЦИЯ