如何防止表格超出Bootstrap 4卡片主体宽度？

要防止表格超出Bootstrap 4卡片主体宽度，可以使用一些CSS样式来解决。下面是一个示例代码，演示如何防止表格超出卡片主体宽度：

HT ML 代码：

<div class="card">
  <div class="card-body">
    <div class="table-responsive">
      <table class="table">
        <thead>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </thead>
        <tbody>
            <td>张三</td>
            <td>20</td>
            <td>男</td>
            <td>李四</td>
            <td>25</td>
            <td>女</td>
        </tbody>
      </table>
CSS代码：
/* 防止表格超出卡片主体宽度 */
.card {
  overflow: hidden;
.table-responsive {
  overflow-x: auto;
在上述代码中，我们将card的overflow属性设置为hidden，这样可以隐藏卡片中超出部分的内容。然后，我们使用.table-responsive类来创建一个可水平滚动的容器，并设置其overflow-x属性为auto，以便在表格内容超出容器宽度时显示水平滚动条。
这样，当表格的内容超出卡片主体宽度时，用户可以使用水平滚动条来查看表格的完整内容，同时保持卡片的整体样式不受影响。