Fixed Header Flex Table - Header Vertical Align

Question

jsFiddle - https://jsfiddle.net/24by5tmv/1/

I've got a simple flex table that fixes the header and scrolls the table body but i'm wanting to vertically align center/middle the contents (header and body) within each cell.

Setting a cell to vertical-align: middle; usually does the trick but it seems using flexbox is preventing vertically aligning cell contents.

I don't doubt i've overlooked something, and probably something simple, but does anyone have any ideas for fixing this?

Much appreciated :)

Answer 1

You can make the th,td element flex also and apply alignment inside them:

table.flex-table tr td,
table.flex-table tr th {
  display: flex;
  flex: 1;
  align-items:center;
  justify-content:center;
}

Full code

 .panel-body { height: 300px; } table { border-top: 1px solid black; /* Just to Highlight Top of Table */ } table thead tr { height: 5em; /* Fixed Row Height */ } /* Flex Table */ table.flex-table { display: flex; flex-direction: column; height: 100%; } table.flex-table thead, table.flex-table tbody { display: block; } table.flex-table thead { margin-right: 0px; } table.flex-table tbody { flex: 1; overflow-y: scroll; } table.flex-table tr { width: 100%; display: flex; } table.flex-table tr td, table.flex-table tr th { display: flex; flex: 1; align-items:center; justify-content:center; } 

 <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <div class="container"> <br> <div class="row"> <div class="col-sm-12"> <div class="panel panel-default"> <div class="panel-body"> <table class="table table-striped flex-table"> <thead> <tr> <th>Test</th> <th>Test</th> <th>Test</th> <th>Test</th> <th>Test</th> <th>Test</th> </tr> </thead> <tbody> <tr> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> </tr> <tr> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> </tr> <tr> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> </tr> <tr> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> </tr> <tr> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> </tr> <tr> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> </tr> <tr> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> </tr> <tr> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> </tr> <tr> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> </tr> <tr> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> </tr> <tr> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> <td>Something</td> </tr> </tbody> </table> </div> </div> </div> </div> </div>