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 : -


enter image description here

result getting:-


enter image description here

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> 

Comments

Popular posts from this blog

angularjs - ADAL JS Angular- WebAPI add a new role claim to the token -

php - CakePHP HttpSockets send array of paramms -

node.js - Using Node without global install -