垂直中间有固定标题和表格响应自举

Question

我无法将文本置于单元格中间，单行很好但双线不会进入单元格的中心：

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

当我删除plan-list-view-table类（对于FIXED标题）时，垂直对齐有效，但我无法绕过显示：阻止而不破坏固定标题。

特别打破垂直对齐的代码：

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

Answer 1

您可以在flexbox

上使用td属性

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

不确定所有副作用但这些是有效的（注释注释掉的css）：

#plan-list-view-table tbody {
    /* height: 65vh; */
}
#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 tbody td, #plan-list-view-table thead th, 
#plan-list-view-table tfoot td {
    /* float: left; */
    width: 16.7%;
}