css - 为什么我的垂直填充被压缩了？

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 是一个内联元素。仅添加填充不会改变元素。

使用显示: block ；或显示:内联 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;
}