Bootstrap 4 表头和行上的全宽背景，但内容上的容器答案

【问题标题】：Bootstrap 4 Full width background on table header and rows but container on contentsBootstrap 4 表头和行上的全宽背景，但内容上的容器
【发布时间】：2018-09-22 03:34:12
【问题描述】：

我正在使用 Bootstrap 4，我想使用他们的 table，但我无法让它适合我给出的设计，看起来大致如下图所示。请注意全宽背景颜色以及表内容在 Bootstrap .container 中的位置：

我需要thead 上的全宽深色背景颜色和tbody 上的全宽浅色背景颜色，但元素应该在 Bootstrap .container 内

我尝试将整个 table 放在 .container 中，但后来我不知道如何制作全宽背景。

.table .thead-dark th {
  background-color: #333333 !important;
}
tbody {
  background: lightgrey;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
  <table class="table">
    <thead class="thead-dark">
      <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Handle</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
</div>

我尝试将.container 类添加到tr 中，但没有奏效。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<table class="table">
  <thead class="thead-dark">
    <tr class="container">
      <div class="row">
        <div class="col">
          <th scope="col">#</th>
          <th scope="col">First</th>
          <th scope="col">Last</th>
          <th scope="col">Handle</th>
        </div>
      </div>
    </tr>
  </thead>
  <tbody>
    <tr class="container">
      <div class="row">
        <div class="col">
          <th scope="row">1</th>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </div>
      </div>
    </tr>
    <tr class="container">
      <div class="row">
        <div class="col">
          <th scope="row">2</th>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </div>
      </div>
    </tr>
    <tr class="container">
      <div class="row">
        <div class="col">
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
        </div>
      </div>
    </tr>
  </tbody>
</table>

【问题讨论】：

能否添加您使用过的 HTML 结构和 CSS 的代码
您能否添加您的代码，说明您是如何尝试实现这一目标的。
按要求添加了我的代码。
我认为引导程序中的 .container 类只能有一个元素。

标签： html css html-table bootstrap-4

【解决方案1】：

使用将您的container 和table 包裹到tableFull 并在css 下方查看DIV tableFull。

.tableFull {
  background-color: #333333 !important;
  width:100%;
  height:51px;
}

.table .thead-dark th {
  background-color: #333333 !important;
}
tbody {
  background: lightgrey;
}

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="tableFull">
    <div class="container">
      <table class="table">
        <thead class="thead-dark">
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
          </tr>
        </tbody>
      </table>
    </div>
</div>

【讨论】：

【解决方案2】：

.table .thead-dark th {
  background-color: #333333 !important;
}
tbody {
  background: lightgrey;
}
.container-fluid {
  padding: 0 !important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid">
  <table class="table">
    <thead class="thead-dark">
      <tr>
        <th scope="col"></th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col"></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row"></th>
        <td>Mark</td>
        <td>Otto</td>
        <td></td>
      </tr>
      <tr>
        <th scope="row"></th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td></td>
      </tr>
      <tr>
        <th scope="row"></th>
        <td>Larry</td>
        <td>the Bird</td>
        <td></td>
      </tr>
    </tbody>
  </table>
</div>

【讨论】：

这只是全宽的一切，所以它没有达到所要求的，这是一直到边缘的全宽背景，但是容器化的内容不会一直到边缘。
只需删除 container-fluid 上的填充（我编辑了我的片段）
内容和文本一样，需要在容器内。您的内容一直延伸到边缘。