Чтобы создать таблицу с закругленными углами с использованием Bootstrap 4, вам следует использовать компонент `<div class="card">`, так как он предоставляет возможность оформления с закругленными углами. Затем внутри карточки вы можете вставить вашу таблицу. Вам нужно будет также убедиться, что вы правильно стилизуете таблицу, чтобы ее края не сливались с элементами вне карточки.
Вот пример кода, который демонстрирует, как это сделать:
```html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<title>Таблица с закругленными углами</title>
<style>
.table-card {
border-radius: 15px; /* Закругление краёв карточки */
overflow: hidden; /* Скрытие возможного переполнения */
}
.table-card .table {
margin-bottom: 0; /* Убираем отступы снизу для таблицы */
}
</style>
</head>
<body>
<div class="container mt-5">
<div class="mb-3">
<!-- Здесь может быть ваша строка поиска или другие элементы -->
<input type="text" class="form-control" placeholder="Поиск..." />
</div>
<div class="card table-card">
<div class="card-body">
<table class="table">
<thead>
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
<th>Заголовок 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Данные 1</td>
<td>Данные 2</td>
<td>Данные 3</td>
</tr>
<tr>
<td>Данные 4</td>
<td>Данные 5</td>
<td>Данные 6</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Здесь может быть ваша пагинация или другие элементы -->
<nav aria-label="Page navigation" class="mt-3">
<ul class="pagination justify-content-center">
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
</ul>
</nav>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
```
### Объяснение кода:
1. **Структура**: Весь код помещён в контейнер (`<div class="container">`), который обеспечит центральное выравнивание и отступы.
2. **Стилизация**: Мы добавили класс `table-card`, который задаёт закругление углов и скрывает возможные переполнения.
3. **Таблица**: Таблица помещена внутрь карточки (`<div class="card">`), что и даёт ей закруглённые углы.
4. **Элементы поиска и пагинации**: Находятся вне карточки, таким образом, они не имеют закругленных краёв и выглядят отдельно.
Вы можете изменять стиль по своему усмотрению, например, изменять значение `border-radius`, чтобы сделать углы более или менее закруглёнными.