html - 为什么 'max-width' 被忽略到表格单元格上？

Question

为什么 max-width 在下表中被忽略，一旦我将 display: table-row-group 添加到 header 并且 body ？

.table {
  display: table;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  padding: 5px;
  border: 1px solid black;
}

.header,
.body {
  display: table-row-group;
}

<div class="table">
  <div class="header">
    <div class="row">
      <div class="cell" style="max-width: 4em;">
        content content content content content
      </div>
      <div class="cell">
        content
      </div>
    </div>
    <div class="row">
      <div class="cell">
        content content content content content
      </div>
      <div class="cell">
        content
      </div>
    </div>
  </div>
  <div class="body">
    <div class="row">
      <div class="cell">
        content
      </div>
      <div class="cell">
        content
      </div>
    </div>
  </div>
</div>

我想控制 body 单元格的最小/最大尺寸，在 上设置 min-/max-width >head 单元格(不一定像代码片段中那样需要两行)。

这里发生了什么？是什么阻止了 max-width 的工作？

Answer 1

“'min-width' 和 'max-width' 对表格、内联表格、表格单元格、表格列和列组的影响未定义。”参见 definition of max-width在 CSS 2.1 规范中。