html - 固定标题 Flex 表 - 标题垂直对齐

Question

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

我有一个简单的 flex 表，它可以修复表头并滚动表体，但我想在每个单元格内垂直居中/居中对齐内容(表头和表体)。

将单元格设置为 vertical-align: middle; 通常可以解决问题，但似乎使用 flexbox 会阻止垂直对齐单元格内容。

我不怀疑我忽略了一些东西，可能是一些简单的东西，但是有人有解决这个问题的想法吗？

非常感谢:)

Answer 1

您也可以使 th,td 元素 flex 并在其中应用对齐:

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

完整代码

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