html - why width is not working in table-cell? -

i need following output given html, used display:table property ul ul , display:table-cell property li childeren, every ul ul has 4 child expect last ul ul, set width of every li child of ul ul, not working last raw, dont want edit html, please me, why happening. in advance

jsfiddle

expect output : -

---

result 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%; } 

just add empty <li></li> last row , fixed, this:

<ul>     <li><a href="#">31</a></li>     <li><a href="#">32</a></li>     <li><a href="#">33</a></li>     <li></li> </ul>