Bootstrap 4 : Vertical alignment in responsive table

Question

With Bootstrap 4, when table-responsive is added to the table, the text is no longer center vertically. 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.

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>

Answer 1

You have to add the .table-responsive class to a container element, not the table itself.

Docs

Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a .table with .table-responsive. Or, pick a maximum breakpoint with which to have a responsive table up to by using .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

So override bootstrap styles with your styles "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. In particular, this can clip off dropdown menus and other third-party widgets.

Answer 3

You just have to set a height for the tbody , because it has vertical-align: middle by default. Therefor you could omit the height for the table . 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.

Working example:

I exchanged the fixed dimensions with responsive ones (for example: 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 4

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:

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

Answer 5

Try as the following:

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

or

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