了解CSS表格单元格和百分比宽度 [英] Understanding CSS table-cell and percentage width

问题描述

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

如果您注意到，每个菜单项的宽度相同。在CSS中，我们应该给它任何百分比值，这是什么原因？注意父div不会显示：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 =＃>提交< / a> < / li> < li>< a href =＃>分支< / a> < / li> < li>< a href =＃>贡献< / a> < / li> < li>< a href =＃>任何内容< / a> < / li> < / ul>< / div>  

后面的百分比宽度？

解决方案

这与自动表格布局工作。特别是：

列宽的百分比值相对于表格宽度。如果表格具有width：auto，则百分比表示对列宽度的约束，UA应尝试满足该约束。 （显然，这并不总是可能的：如果列的宽度为110％，则不能满足约束。）

你的case，你设置一个微小的百分比宽度每个table-cell元素。但是浏览器需要确保表格单元填充表格的宽度（其本身与其包含的块一样宽），因此它必须扩展单元格以尽可能多地占用表格内的空间。 p>

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

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

pre class =snippet-code-html lang-html prettyprint-override> < div> < ul> < li>< a href =＃>提交< / a> < / li> < li>< a href =＃>分支< / a> < / li> < li>< a href =＃>贡献< / a> < / li> < li>< a href =＃>任何内容< / a> < / li> < / ul>< / div>

略有不同，因为某些单元格的内容比其他单元格的内容更长，并且在计算单元格宽度时会考虑此内容的长度。

使用小到1％的值的原因是为了可以继续添加单元格，浏览器仍会尝试尽可能均匀地分布可用宽度。你基本上告诉细胞，他们不需要一定的宽度至少，所以你可以添加（虽然技术上，1％仍然是 ）。

没有元素被分配 display：table 的事实是无关紧要的，因为将在table-cells周围生成一个匿名表包装器，可以正确呈现。这个匿名表包装函数与具有 display：table 的未定义元素完全相同，这意味着表宽度是自动的，用于计算单元格宽度的百分比。

I was checking how Github display the below menu:

If you notice, each menu item is given an equal width. In CSS, we should give it any percentage value, what's the reason behind that? notice that the parent div is not given display: table property.

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>

What's the reason behind the percentage width?

解决方案

This has to do with how automatic table layout works. In particular:

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

In your case, you're setting a minuscule percentage width on every table-cell element. But the browser needs to ensure that the table-cells fill up the width of the table (which itself is as wide as its containing block), so it has to expand the cells to occupy as much space within the table as possible.

The reason why this results in approximately equal-width cells is because the percentage value is equal for all of them. If, for example, you set a slightly larger width for one of the cells, you'll see that it grows wider and the other cells become narrower to accommodate:

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>

However, note that there is a slight difference because some cells have longer content than others, and the length of this content is accounted for when calculating the cell widths.

The reason why a value as small as 1% is used is so that you can continue to add cells and the browser will still try to distribute the available width as evenly as possible. You're essentially telling the cells that they don't need to be a certain width at minimum so you can add away (although technically, 1% is still something).

The fact that no elements are assigned display: table is inconsequential, because an anonymous table wrapper will be generated around the table-cells so that they can render correctly. This anonymous table wrapper functions exactly the same as an unstyled element with display: table, which means the table width is auto for the purposes of calculating percentage cell widths.

这篇关于了解CSS表格单元格和百分比宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！