1

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 :)

Delta Sierra
  • 67
  • 1
  • 2
  • 7
  • `vertical-align: middle` works on `inline-block` elements, for flex items, use auto margin's, e.g. `margin: auto 0;` ... https://jsfiddle.net/24by5tmv/2/ – Asons Feb 12 '18 at 14:58

1 Answers1

2

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>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • Well i feel a little foolish! Knew it'd be something simple, much appreciated for that :D – Delta Sierra Feb 12 '18 at 15:04
  • @DeltaSierra don't fell that ;) your issue is that the td, th are already taking full height, so you can no more align them but you can align their content instead – Temani Afif Feb 12 '18 at 15:10