Question

使用Bootstrap 4，当table-responsive添加到表格时，文本不再垂直居中。这是一个错误吗？如果没有，是否有一个简单的解决方案让文本居中在中间。一个纯粹的Bootstrap解决方案将不胜感激。

Here (Fiddle)就是问题的一个例证。

Answer 1

您必须将 .table-responsive 类添加到容器元素，而不是表本身。

<块引用>

响应式表格允许轻松地水平滚动表格。通过使用 .table-responsive 包装 .table 使任何表格在所有视口中都具有响应性。或者，通过使用 .table-responsive{-sm|-md|-lg|-xl} 选择一个最大断点，以便响应表。

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>

<div class="table-responsive">
  <table class="bg-danger" style="width:300px; height:200px;">  
    <tr>
      <th scope="row">
        <div class="text-left">
          table-responsive
        </div>      
      </th>
    </tr>  
  </table>
</div>
<table class="bg-success " style="width:300px; height:200px;">  
  <tr>
    <th scope="row">
      <div class="text-left">
        no table-responsive
      </div>      
    </th>
  </tr>  
</table>

Answer 2

所以用你的样式覆盖bootstrap样式＆＃34; display：table＆＃34;：

<table class="bg-danger table-responsive" style="width:300px; height:200px; display:table;"> 
...

但如果你在单元格中有很多文本 - 它会被切断。请参阅响应表的文档：

垂直剪切/截断响应表使用overflow-y：隐藏，剪掉任何超出底部或顶部的内容桌子的边缘。特别是，这可以剪切下拉菜单和其他第三方小部件。

Answer 3

在Boostrap 4表格中，当班级为class="table-responsive"时，只需将class="pt-md-3 pt-3"添加到<td>元素即可垂直对齐其内容（纯文本，div，...）方面单元格的高度，如下例所示：

<table class="table-responsive">
  <tbody>
    <tr>
      <td class="pt-md-3 pt-3">Foo</td>
    </tr>
  </tbody>
</table>

Answer 4

您只需为 height 设置一个 tbody，因为它默认具有 vertical-align: middle。因此，您可以省略 height 的 table。此外，不需要内联样式。您可以通过为非响应表定义 width 和为响应表定义 max-width 来覆盖引导程序样式。

工作示例：

我将固定尺寸换成了响应式尺寸（例如：300px -> 45vw）

table {
  width: 45vw;
  max-width: 45vw;
}

tbody {
  height: 30vw;
}

<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="bg-danger table-responsive">  
  <tr>
    <th scope="row">
      <div class="text-left">
        table-responsive
      </div>      
    </th>
  </tr>  
</table>

<table class="bg-success">  
  <tr>
    <th scope="row">
      <div class="text-left">
        no table-responsive
      </div>      
    </th>
  </tr>  
</table>

Answer 5

尝试如下：

.table > tbody > tr > td {
    align-items: center;
}

或

<td class="align-center">You</td>

Bootstrap 4：响应表中的垂直对齐

5 个答案: