Why doesn't width work in table-cell?

I need the following output with the given html, I used a property display:table

with ul ul

and a display:table-cell

property with their li

childeren, each ul ul

has four children waiting for the last one ul ul

, I already set the width of each child li

from ul ul

, but it doesn't work with the last raw one, I don't want to edit my html please help me why this is happening. thanks in advance

JSFiddle

Expect output: -

Result I am getting: -

Html: -

<div>
<ul>
    <li>
        <ul>
            <li><a href="#">11</a></li>
            <li><a href="#">12</a></li>
            <li><a href="#">13</a></li>
            <li><a href="#">14</a></li>
        </ul>
    </li>
    <li>
        <ul>
            <li><a href="#">21</a></li>
            <li><a href="#">22</a></li>
            <li><a href="#">23</a></li>
            <li><a href="#">24</a></li>
        </ul>
    </li>
    <li>
        <ul>
            <li><a href="#">31</a></li>
            <li><a href="#">32</a></li>
            <li><a href="#">33</a></li>            
        </ul>
    </li>
</ul>

      

        
        
        
      

    

CSS: -

 ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100% !important;
}
div > ul{
    display: block;    
    width: 100%;
}
div > ul > li {
  width: auto;
}
div > ul ul{
    display: table;
    table-layout: fixed;
}
div > ul ul li {
  border-left: 1px solid #ebebeb;
  display: table-cell;
  line-height: 0.9;
  padding: 5px 20px;
  width: 25%;
}