html - 了解 CSS 表格单元格和百分比宽度

Question

我正在检查 Github 如何显示以下菜单:

如果您注意到，每个菜单项的宽度都相等。在 CSS 中，我们应该给它任何百分比值，这背后的原因是什么？请注意，父 div 没有给出 display: table 属性。

div {
  border: 1px solid #000;
  border-radius: 4px;
}

div ul {
  padding: 0;
  margin: 0;
}

div ul li {
  display: table-cell;
  width: 1%;
  text-align: center;
  border-right: 1px solid #000;
  padding: 10px 0;
}

div ul li:last-child {
  border-right: 0;
}

<div>
  <ul>
    <li><a href="#">Commits</a>
    </li>
    <li><a href="#">Branch</a>
    </li>
    <li><a href="#">Contribution</a>
    </li>
    <li><a href="#">anything</a>
    </li>
  </ul>
</div>

百分比宽度背后的原因是什么？

Answer 1

这与 automatic table layout 的方式有关作品。特别是:

A percentage value for a column width is relative to the table width. If the table has 'width: auto', a percentage represents a constraint on the column's width, which a UA should try to satisfy. (Obviously, this is not always possible: if the column's width is '110%', the constraint cannot be satisfied.)

在您的例子中，您在每个表格单元格元素上设置了一个极小的百分比宽度。但是浏览器需要确保表格单元格填满表格的宽度(表格本身与其包含 block 一样宽)，因此它必须扩展单元格以占据表格内尽可能多的空间。

之所以会导致单元格宽度大致相等，是因为所有单元格的百分比值都相等。例如，如果您为其中一个单元格设置稍大的宽度，您会看到它变宽而其他单元格变窄以适应:

div {
  border: 1px solid #000;
  border-radius: 4px;
}

div ul {
  padding: 0;
  margin: 0;
}

div ul li {
  display: table-cell;
  width: 1%;
  text-align: center;
  border-right: 1px solid #000;
  padding: 10px 0;
}

div ul li:first-child {
  width: 3%;
}

div ul li:last-child {
  border-right: 0;
}

<div>
  <ul>
    <li><a href="#">Commits</a>
    </li>
    <li><a href="#">Branch</a>
    </li>
    <li><a href="#">Contribution</a>
    </li>
    <li><a href="#">anything</a>
    </li>
  </ul>
</div>

但是，请注意， 存在细微差别，因为某些单元格的内容比其他单元格长，并且在计算单元格宽度时会考虑该内容的长度。

之所以使用小至 1% 的值，是为了让您可以继续添加单元格，并且浏览器仍会尝试尽可能均匀地分配可用宽度。您实质上是在告诉单元格它们不需要至少达到一定宽度，因此您可以加减(尽管从技术上讲，1% 仍然一些)。

没有元素被分配 display: table 的事实是无关紧要的，因为将在表格单元格周围生成一个匿名表格包装器，以便它们可以正确呈现。这个匿名表格包装器的功能与带有 display: table 的无样式元素完全相同，这意味着为了计算百分比单元格宽度，表格宽度是自动的。