Understanding how automatic table layout functions is crucial here. Specifically:
When a column width is set as a percentage, it is relative to the table width. If the table's width is set to 'auto', the percentage serves as a guideline for the column width that the browser will attempt to fulfill. However, if a column width is set to '110%', for example, this guideline cannot be met.
In your scenario, tiny percentage widths are applied to each table-cell element. The browser must ensure that these cells fill the entire width of the table (which matches its containing block), leading to cell expansion to occupy maximum space within the table.
The equal-width appearance of the cells is due to the uniform percentage value assigned to each. If you were to increase the width of one cell slightly, you would observe it expanding while others shrink accordingly:
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>
It's important to note that slight variations exist due to varying content lengths in the cells, which contribute to the calculation of their widths.
The choice of a small value like 1% allows additional cells to be added while still striving for an even distribution of available width. This way, cells are informed they do not have a minimum required width, promoting flexibility in adding new cells (though technically, 1% does indicate some width).
The absence of elements designated as display: table holds no consequence, as an anonymous table wrapper is automatically generated around the table-cells for proper rendering. This wrapper functions similarly to an unstyled element with display: table, where the table width is considered 'auto' for calculating percentage cell widths.