引导4:响应表中的垂直对齐

Question

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

下面是这个问题的一个例子。

​

<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" style="width:300px; height:200px;">  
  <tr>
    <th scope="row">
      <div class="text-left">
        table-responsive
      </div>      
    </th>
  </tr>  
</table>

<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 1

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

Docs

响应式表格允许轻松地水平滚动表格。通过使用.table -.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

所以用你的样式“display:table”覆盖引导样式：

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

但是如果你在单元格中有很多文本，它将被截断。有关响应表，请参阅文档：

垂直裁剪/截断响应式表格利用overflow-y: hidden，它可以裁剪超出表格底部或顶部边缘的任何内容。特别是，这可以裁剪下拉菜单和其他第三方小部件。

Answer 3

您只需为tbody设置一个height，因为它默认具有vertical-align: middle。因此，您可以省略table的height。此外，不需要内联样式。您可以通过为非响应表定义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>

​