title: why width is not working in table-cell?
body: <p>I need the following output with the given html, i used <code>display:table</code> property with <code>ul ul</code> and <code>display:table-cell</code> property with their <code>li</code> childeren, every <code>ul ul</code> has four child expect last <code>ul ul</code>, i already set the width of every <code>li</code> child of <code>ul ul</code>, but its not working with last raw, I dont want to edit my html, please help me, why its happening. Thanks in advance</p>
  
  <p><a href="http://jsfiddle.net/bmkbxz68/" rel="nofollow noreferrer"><strong>JSFiddle</strong></a></p>
  
  <p><strong>Expect output : -</strong></p>
  
  <hr>
  
  <p><img src="https://i.stack.imgur.com/hRshf.png" alt="enter image description here"></p>
  
  <p><strong>Result I am getting:-</strong></p>
  
  <hr>
  
  <p><img src="https://i.stack.imgur.com/EKG9r.png" alt="enter image description here"></p>
  
  <p><strong>Html:-</strong></p>
  
  <pre><code>&lt;div&gt;
  &lt;ul&gt;
      &lt;li&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;11&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;12&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;13&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;14&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;21&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;22&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;23&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;24&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;31&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;32&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;33&lt;/a&gt;&lt;/li&gt;            
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>CSS:-</strong></p>
  
  <pre><code> ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100% !important;
  }
  div &gt; ul{
      display: block;    
      width: 100%;
  }
  div &gt; ul &gt; li {
    width: auto;
  }
  div &gt; ul ul{
      display: table;
      table-layout: fixed;
  }
  div &gt; ul ul li {
    border-left: 1px solid #ebebeb;
    display: table-cell;
    line-height: 0.9;
    padding: 5px 20px;
    width: 25%;
  }
  </code></pre>