html - 垂直对齐中间带有固定标题和表格响应 Bootstrap

Question

我无法让文本在单元格中间居中，单行没问题，但双行没有在单元格中心:

我在 JSfiddle 上有一个更简单的版本我的代码，但包含我使用的所有 css。

当我删除 plan-list-view-table 类(对于 FIXED 标题)时，垂直对齐有效，但我无法在不破坏固定标题的情况下绕过 display:block。

特别是破坏垂直对齐的代码:

#plan-list-view-table tr:after {  /* clearing float */
     content: ' ';
     display: block;
     clear: both;
}  

Answer 1

您可以在 td 上使用 flexbox 属性

#plan-list-view-table thead,
#plan-list-view-table tbody,
#plan-list-view-table tfoot,
#plan-list-view-table tr,
#plan-list-view-table th,
#plan-list-view-table td {
  display: block;
}

#plan-list-view-table thead tr,
#plan-list-view-table tfoot tr {
  /* fallback */
  width: 97%;
  /* minus scroll bar width */
  width: -webkit-calc(100% - 16px);
  width: -moz-calc(100% - 16px);
  width: calc(100% - 16px);
}

#plan-list-view-table tr:after {
  /* clearing float */
  content: ' ';
  display: block;
  /*visibility: hidden;*/
  clear: both;
}

.table-responsive>.table>tbody>tr>td {
  vertical-align: middle;
}

#plan-list-view-table tbody {
  height: 65vh;
}

#plan-list-view-table tbody td,
#plan-list-view-table thead th,
#plan-list-view-table tfoot td {
  width: 16.70%;
  float: left;
}

#plan-list-view-table tbody td {
 /* height: 50px; */
}

#plan-list-view-table thead th {
  height: 35px;
}


/* Every odd column has a light grey color */

#table-body tr {
  background-color: rgba(224, 224, 224, 0.3);
}


/* Hover on plan entry */

#table-body tr:hover {
  background-color: rgba(233, 233, 234, 1);
  cursor: pointer;
}


/* Green checkbox for "Published" column */

#table-body tr td.green {
  color: green;
}


/* Red checkbox for "Published" column (Not working)*/

#table-body tr td.fade {
  color: red;
}


/* Right delimiter between plans in the plan list*/

#table-head-data tr th,
#table-body tr td {
  border-right: thin solid rgb(224, 224, 224);
  background: transparent;
  vertical-align: middle;
}

.table-responsive>.table>tbody>tr>td {
  vertical-align: middle;
}

.table-responsive {
  overflow: auto;
  /*margin-bottom:20px;*/
}

.table {
  border-left: 0px;
  width: 100%;
  table-layout: fixed;
  text-align: center;
  font-family: 'Lato', sans-serif;
}

.planListItem td {
  display: flex !important;
  justify-content: center;
  align-items: center;
  height: 50px;
}

<div class="table-responsive" id="table-res">

  <table class="table" id="plan-list-view-table">

    <thead id="table-head-data">
      <tr>
        <th> Name <span class="glyphicon"></span></th>
        <th> Description <span class="glyphicon"></span></th>
        <th> Start <span class="glyphicon"></span></th>
        <th> End <span class="glyphicon"></span></th>
        <th> Published Date <span class="glyphicon"></span></th>

      </tr>
    </thead>

    <tbody id="table-body" #plantable>

      <tr class="planListItem">
        <td style="overflow: hidden;">Test</td>
        <td style="overflow: hidden;">TestDoubleLine TestDoubleLine TestDoubleLine</td>
        <td style="overflow: hidden;">3 TestDoubleLine oubleLine</td>
        <td style="overflow: hidden;">4</td>
        <td style="overflow: hidden;">5</td>
      </tr>

    </tbody>
  </table>
</div>