[英]Bootstrap 4 : Vertical alignment in responsive table
With Bootstrap 4, when table-responsive
is added to the table, the text is no longer center vertically.使用 Bootstrap 4,当
table-responsive
添加到 table 时,文本不再垂直居中。 Is it a bug ?这是一个错误吗? If not, is there a simple solution to get the text centered in the middle.
如果没有,是否有一个简单的解决方案可以使文本居中居中。 A pure Bootstrap solution will be appreciated.
纯粹的 Bootstrap 解决方案将不胜感激。
Here is an illustration of the problem.这是问题的说明。
<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>
You have to add the .table-responsive
class to a container element, not the table itself.您必须将
.table-responsive
类添加到容器元素,而不是表本身。
Responsive tables allow tables to be scrolled horizontally with ease.
响应式表格允许轻松地水平滚动表格。 Make any table responsive across all viewports by wrapping a .table with .table-responsive.
通过用 .table-responsive包装.table 使任何表格在所有视口中都具有响应性。 Or, pick a maximum breakpoint with which to have a responsive table up to by using .table-responsive{-sm|-md|-lg|-xl}.
或者,通过使用 .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>
So override bootstrap styles with your styles "display:table":所以用你的样式“display:table”覆盖引导样式:
<table class="bg-danger table-responsive" style="width:300px; height:200px; display:table;">
...
But if you have many text in cell - it will be cut off.但是如果单元格中有很多文本 - 它会被切断。 See documentation for responsive tables:
请参阅响应表的文档:
Vertical clipping/truncation Responsive tables make use of overflow-y: hidden, which clips off any content that goes beyond the bottom or top edges of the table.
垂直裁剪/截断 响应式表格使用溢出-y:隐藏,它会裁剪掉超出表格底部或顶部边缘的任何内容。 In particular, this can clip off dropdown menus and other third-party widgets.
特别是,这可以剪掉下拉菜单和其他第三方小部件。
You just have to set a height
for the tbody
, because it has vertical-align: middle
by default.您只需要为
tbody
设置一个height
,因为它tbody
具有vertical-align: middle
。 Therefor you could omit the height
for the table
.因此,您可以省略
table
的height
。 Furthermore there is no need for inline styles.此外,不需要内联样式。 You can override the bootstrap style by defining
width
for the non-responsive table and max-width
for the responsive.您可以通过为非响应式表格定义
width
为响应式表格定义max-width
来覆盖引导程序样式。
Working example:工作示例:
I exchanged the fixed dimensions with responsive ones (for example: 300px
-> 45vw
)我用响应式尺寸交换了固定尺寸(例如:
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>
In Boostrap 4 table, when the class is class="table-responsive"
, just add class="pt-md-3 pt-3"
to the <td>
element to vertical align its content (plain text, div, ...) respect to the height of its cell, as in this example:在 Boostrap 4 table 中,当 class 为
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>
Try as the following:尝试如下:
.table > tbody > tr > td {
align-items: center;
}
or或
<td class="align-center">You</td>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.