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
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>
Comments
Post a Comment