Understanding CSS table-cell and percentage width

Question

I was checking how Github display the below menu:

If you notice, each

Answer 1

This is something called the 1% width table hack.

This is because the table-cell inherits it's width from the parent div, allowing you to specify a related percentage of the cell width.

Here is a working demo on CodePen that you can play with and examine further.

http://codepen.io/ld0rman/pen/FCiLh

    

  
One
  
Two
  
Three
  
Four
  
Five
  

CSS:

  ul {
 list-style-type: none; 
 margin: 100px auto;
  width: 80%;
 }

 li {
   display: table-cell; 
   width: 1%;
    text-align: center;
    }

      a {
     display: block;
        border: 1px solid black;
      padding: 25px;
      text-decoration: none;
      color: white;
   text-transform: uppercase;
font-weight: bold;
background: grey;

 &:hover {
text-decoration: none; 
color: yellow;
background: darken(grey, 10%);
  }
   }

As you can see, it is coded similarly to your github example. Any more questions, ask away!