#css #bootstrap-vue
Вопрос:
Я хочу, чтобы у моей 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
, но тогда я получу такой результат:-
Тем не менее, это также проблема, из-за которой граница распространяется по всем углам. Любая помощь будет высоко оценена!
Комментарии:
1. но ваша «текущая таблица» имеет закругленный угол. Вам также нужна строка между каждой строкой?
Ответ №1:
Добавить закругленные границы в таблицу немного сложнее,
table { position:relative;max-width:600px }
table::after {
content: " ";
inset: 0;
border: solid #000 1px;
position: absolute;
border-radius: 20px;
}