Question

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

我有一个简单的弹性表来固定标题并滚动表格主体，但我想要垂直对齐每个单元格中的内容（标题和正文）的中心/中间。

将单元格设置为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>

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

1 个答案: