html - CSS 表格设置最大行高

Question

我正在尝试设置 CSS 表格单元格的最大高度。有几个堆栈溢出线程建议创建一个内部 div 并在那里设置最大高度。问题是这似乎不适用于大字体:

<div class="table">
  <div class="table-cell">
    <div class="table-cell-inner">Test</div>
  </div>
  <div class="table-cell">
    <div class="table-cell-inner big">Test</div>
  </div>
</div>

.table {
  display: table;
  border-spacing: 10px;
  width: 300px;
}
.table-cell {
  display: table-cell;
  height: 50px;
  background: yellow;
}
.table-cell-inner {
  height: 50px;
  max-height: 50px;
  overflow: hidden;
}
.big {
  font-size: 50px;
}

fiddle :http://jsfiddle.net/ru1dr2y3/

大类将单词 Test 设置为 50 像素的字体大小，并导致表格单元格大于允许的大小。我该如何解决？ position: absolute; 似乎是一个解决方案，但这似乎是一个丑陋的修复。

Answer 1

问题在于，当您在 CSS 中伪造一个表格时，这些元素不会全部具有真实表格所具有的所有属性。如果您将其重写为真正的表，则问题将不存在。

table {
  border-spacing: 10px;
  width: 300px;
}
td {
  height: 50px;
  background: yellow;
}
.table-cell-inner {
  height: 50px;
  max-height: 50px;
  overflow: hidden;
}
.big {
  font-size: 50px;
}

<table>
  <tr>
    <td>
      <div class="table-cell-inner">Test</div>
    </td>
    <td>
      <div class="table-cell-inner big">Test</div>
    </td>
  </tr>
</table>
<div style="height: 50px; background: red;">Reference: This is 50px height.</div>

所以解决方案是手动添加这些属性。
(如果您不介意的话，我还冒昧地插入了缺失的表格行。)

.table {
  display: table;
  border-spacing: 10px;
  width: 300px;
}
.row {
  display:table-row}
.table-cell {
  display: table-cell;
  height: 50px;
  background: yellow;
  vertical-align:middle; /* there you go */
}
.table-cell-inner {
  height: 50px;
  max-height: 50px;
  overflow: hidden;
}
.big {
  font-size: 50px;
}

<div class="table">
  <div class="row">
    <div class="table-cell">
      <div class="table-cell-inner">Test</div>
    </div>
    <div class="table-cell">
      <div class="table-cell-inner big">Test</div>
    </div>
  </div>
</div>
<div style="height: 50px; background: red;">Reference: This is 50px height.</div>

问题在于，使用默认的 vertical-align:baseline 时，浏览器将最左边的 table-cell-inner 向下移动，使其基线与最右边的基线对齐，这会导致累积高度变大。 (看看我在你原来的 fiddle 中给 table-cell-inner 一个边框的意思。)