Bootstrap 4 表响应式 tbody 滚动答案

【问题标题】：Bootstrap 4 table responsive tbody scrollBootstrap 4 表响应式 tbody 滚动
【发布时间】：2019-01-17 15:08:40
【问题描述】：

使用 Bootstrap 4。我有一个响应式表格，我想在其中制作一个可滚动的 tbody。表格如下所示：

<div class="table-responsive">
  <table class="table table-striped table-hover custom-table text-nowrap">
    <thead>
      <tr>
        <th>row1</th>
        <th>row2</th>
        <th>row2</th>
      </tr>
    </thead>
    <tbody>
      <!-- some rows -->
    </tbody>
  </table>

为了在 tbody 中滚动，我在表中添加了一个 scss 类 .custom-table，它看起来像这样

.custom-table {
  tbody {
     height: 50px;
     overflow-y: auto;
     width: 100%;
     display: block;
  }
}

但是，这种样式不能正常工作。 tbody 中的所有内容都向左移动。我有一个有效的JSFiddle 示例。我做错了什么？

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-table

【解决方案1】：

请检查下面，我更喜欢使用flexbox。我还使用 -webkit 和 -ms 前缀以获得更多跨浏览器兼容性

  tbody , thead {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  tr {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  th,td {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: center;
  }

  tbody {
     height: 50px;
     overflow-y: auto;
  }

  thead {
    padding-right: 20px;
  }

由于tbody 上的滚动条，我将padding-right 设置为thead。

【讨论】：

是的，但是表格会随着标题标题滚动，我需要它保持原位。

【解决方案2】：

你试过喜欢这个吗？

像这样改变你的CSS

.custom-table> tbody {
    display:block;
    height:50px;
    overflow:auto;
}
.custom-table> thead, tbody tr {
    display:table;
    width:100%;         
}
.custom-table> thead {
    width:   100%   
}
.custom-table {
    width:100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="table-responsive">
  <table class="table table-striped table-hover custom-table text-nowrap">
    <thead>
      <tr>
        <th>row1</th>
        <th>row2</th>
        <th>row2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>text1</td>
        <td>text2</td>
        <td>text3</td>
      </tr>
      <tr>
        <td>text4</td>
        <td>text5</td>
        <td>text6</td>
      </tr>
      <tr>
        <td>text7</td>
        <td>text8</td>
        <td>text9</td>
      </tr>
    </tbody>
  </table>
</div>

【讨论】：

一切都很好，但是表格中的内容没有对齐。
你想要文本中心吗？

【解决方案3】：

使用Udara Kasun's solution，但使列对齐：

.custom-table>tbody {
  display: block;
  height: 50px;
  overflow: auto;
}
.custom-table>thead,
tr {
  display: block;
  width: 100%;
}

.custom-table>thead {
  width: 100%
}

.custom-table {
  width: 100%;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<div class="container-fluid">
  <div class="flex-group-1" style="overflow-y: auto">
    <table class="table table-striped table-hover custom-table table-bordered table-responsive ">
      <thead>
        <tr>
          <th width="100">col1</th>
          <th width="100">col2</th>
          <th width="100">col3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td width="100">text1</td>
          <td width="100">text2</td>
          <td width="100">text3</td>
        </tr>
        <tr>
          <td width="100">text4</td>
          <td width="100">text5</td>
          <td width="100">text6</td>
        </tr>
        <tr>
          <td width="100">text7</td>
          <td width="100">text8</td>
          <td width="100">text9</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

【讨论】：