为什么我的垂直衬垫被压扁了？

Question

jsbin

如您所见，填充在上方的标题上方延伸。为什么表格单元不能扩展以适应高度？

下面粘贴了代码。

.index-table {
  width: 100%;
  box-sizing: border-box;
}
.index-table thead td,
.index-table thead th {
  padding: 8px;
  text-align: left;
  color: #676A6C;
  border-bottom: 2px solid #DDD;
}
.index-table tbody tr td,
.index-table tbody tr th {
  border-top: 1px solid #e7eaec;
  padding: 0;
}
.index-table tbody tr td.btn-group,
.index-table tbody tr th.btn-group {
  padding: 3px 3px 1px 3px;
}
.index-table tbody tr td > span,
.index-table tbody tr th > span,
.index-table tbody tr td > a,
.index-table tbody tr th > a {
  padding: 15px;
}
.index-table tbody tr td > a,
.index-table tbody tr th > a {
  color: #676A6C;
  text-decoration: none;
  display: block;
}
.index-table tbody tr:nth-child(odd) {
  background-color: #F9F9F9;
}
.index-table tbody tr:nth-child(even) {
  background-color: white;
}
.index-table tbody tr.clickable-row:hover {
  background-color: #f0f4fc;
}

<table class="index-table">
  <thead>
    <tr>
      <th>Date</th>
      <th>Time</th>
      <th>Vehicle</th>
      <th>Customer</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="4"><span>No bookings found.</span>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

span是一个内联元素。 只是添加填充不会改变元素。

使用display：block;或显示：inline-block;改变它以使填充起作用。

.index-table tbody tr td > span,
.index-table tbody tr th > span,
.index-table tbody tr td > a,
.index-table tbody tr th > a {
  padding: 15px;
  display:block;
}