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

Question

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

3

这是我的代码示例：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="row">
  <div class="col-6">
    <div class="card mt-4">
      <div class="card-header">
        <h5 class="text-center">Comments</h5>
      </div>
      <div class="card-body">
        <table class="table table-primary">
          <thead>
            <tr>
              <th colspan="6">
                <div class="pull-left">
                  <button type="button" class="btn btn-outline-secondary btn-sm"><i class="fa fa-plus-circle" aria-hidden="true"></i> Add New</button>
                </div>
                <div class="pull-right">
                  <button type="button" class="btn btn-outline-secondary btn-sm"><i class="fa fa-list" aria-hidden="true"></i> View All</button>
                </div>
              </th>
            </tr>
            <tr>
              <th>Subject</th>
              <th>Author</th>
              <th>Date</th>
              <th>Year</th>
              <th>Edit</th>
              <th>Delete</th>
            </tr>
          </thead>
          <tbody>
            <tr>

              <td>This is a test comment</td>
              <td>John Wick</td>
              <td>06/28/2019</td>
              <td>2019</td>
              <td class="text-center">
                <button type="button" class="btn btn-outline-secondary btn-sm comment-edit">Edit</button>
              </td>
              <td class="text-center">
                <button type="button" class="btn btn-outline-secondary btn-sm comment-delete">Delete</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

正如您在我的示例表中看到的那样，表格溢出了卡片主体。有没有一种方法可以将表格适配到卡片主体内？谢谢。

- espresso_coffee

要么为表格获取滚动条，要么使表格内容变小（没有填充）。 - Akber Iqbal

3个回答

4

Bootstrap有一个类.table-responsive，可以用来创建响应式表格。它会添加水平滚动条以适应屏幕大小。

<div class="table-responsive">
    <table class="table">
    ...
    </table>
</div>

附注：使用最新版本的bootstrap和jQuery，因为旧版本可能存在错误。

阅读更多：文档

- Jakub Muda

3

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>

<div class="row">
  <div class="col-6">
    <div class="card mt-4">
      <div class="card-header">
        <h5 class="text-center">Comments</h5>
      </div>
      <div class="card-body">
        <table class="table-responsive table-primary">
          <thead>
            <tr>
              <th colspan="6">
                <div class="pull-left">
                  <button type="button" class="btn btn-outline-secondary btn-sm"><i class="fa fa-plus-circle" aria-hidden="true"></i> Add New</button>
                </div>
                <div class="pull-right">
                  <button type="button" class="btn btn-outline-secondary btn-sm"><i class="fa fa-list" aria-hidden="true"></i> View All</button>
                </div>
              </th>
            </tr>
            <tr>
              <th>Subject</th>
              <th>Author</th>
              <th>Date</th>
              <th>Year</th>
              <th>Edit</th>
              <th>Delete</th>
            </tr>
          </thead>
          <tbody>
            <tr>

              <td>This is a test comment</td>
              <td>John Wick</td>
              <td>06/28/2019</td>
              <td>2019</td>
              <td class="text-center">
                <button type="button" class="btn btn-outline-secondary btn-sm comment-edit">Edit</button>
              </td>
              <td class="text-center">
                <button type="button" class="btn btn-outline-secondary btn-sm comment-delete">Delete</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
</body>
</html>

你可以在你的表格上使用.table-responsive代替使用.table。

- nazifa rashid

1

这是错误的。你不能将.table改为.table-responsive。你必须将.table-responsive添加到父元素中。 - Jakub Muda

1

这不是错误。.table 只有以下属性，不一定要硬性使用。.table { 宽度：100％; 底边距：1rem; 背景颜色：透明; }此代码不会造成重大变化，顺便感谢您的评论。 - Navneet Kumar

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Navneet Kumar · Accepted Answer

尝试这个解决方案，然后您可以相应地进行编辑。

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    
    <div style="max-width:400px">
    <div class="row">
      <div class="col-12">
        <div class="card mt-4">
          <div class="card-header">
            <h5 class="text-center">Comments</h5>
          </div>
          <div class="card-body">
            <table class="table table-primary table-responsive">
              <thead>
                <tr>
                  <th colspan="6">
                    <div class="pull-left">
                      <button type="button" class="btn btn-outline-secondary btn-sm"><i class="fa fa-plus-circle" aria-hidden="true"></i> Add New</button>
                    </div>
                    <div class="pull-right">
                      <button type="button" class="btn btn-outline-secondary btn-sm"><i class="fa fa-list" aria-hidden="true"></i> View All</button>
                    </div>
                  </th>
                </tr>
                <tr>
                  <th>Subject</th>
                  <th>Author</th>
                  <th>Date</th>
                  <th>Year</th>
                  <th>Edit</th>
                  <th>Delete</th>
                </tr>
              </thead>
              <tbody>
                <tr>
    
                  <td>This is a test comment</td>
                  <td>John Wick</td>
                  <td>06/28/2019</td>
                  <td>2019</td>
                  <td class="text-center">
                    <button type="button" class="btn btn-outline-secondary btn-sm comment-edit">Edit</button>
                  </td>
                  <td class="text-center">
                    <button type="button" class="btn btn-outline-secondary btn-sm comment-delete">Delete</button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
      </div>