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

小提琴：http://jsfiddle.net/ru1dr2y3/

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

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

因此，解决方案是手动添加这些属性（如果你不介意的话，我也冒昧地插入了丢失的表格行。）

＆＃13;

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

＆＃13;

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

＆＃13;

问题在于，默认情况下vertical-align:baseline浏览器将最左边的table-cell-inner向下移动，使其基线与最右边的基线对齐，这会导致累积高度变大。（通过在原始小提琴中给table-cell-inner边框看看我的意思。）

Answer 2

change your css bit according to the below snippet

.table {
    display: table;
    border-spacing: 10px;
    width: 300px;
}
.table-cell {
display: inline-block;
    background: yellow;
    /* width: 20px; */
    max-height: 50px;
    margin-right: 10px;
}
.table-cell-inner {
    height: 50px;
    overflow: hidden;
    /* max-width: 90px; */
    display: inline-block;
    line-height: 50px;
}
.big {
    font-size: 50px;
}

<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>
<div style="height: 50px; background: red;">Reference: This is 50px height.</div>

CSS表设置最大行高

2 个答案: