title: Understanding CSS table-cell and percentage width
body: <p>I was checking how Github display the below menu:</p>
  
  <p><img src="https://i.stack.imgur.com/2rxO8.png" alt="enter image description here"></p>
  
  <p>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.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;Commits&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Branch&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Contribution&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;anything&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What's the reason behind the percentage width? </p>