CODEWITHSUNDEEP
htmlcss
Praveen Rawat
Praveen Rawat

Reputation: 734

why width is not working in table-cell?

I need the following output with the given html, i used display:table property with ul ul and display:table-cell property with their li childeren, every ul ul has four child expect last ul ul, i already set the width of every li child of ul ul, but its not working with last raw, I dont want to edit my html, please help me, why its happening. Thanks in advance

JSFiddle

Expect output : -

enter image description here

Result I am 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%;
}

Upvotes: 3

Views: 155

Answers (4)

stanze
stanze

Reputation: 2480

Without adding any li, Try this Demo

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 li {
  border-left: 1px solid #ebebeb;
  display: table-cell;
  line-height: 0.9;
  padding: 5px 20px;  
}

Upvotes: 1

priya786
priya786

Reputation: 1834

you just have to main the length of li

<ul><li></li>
<li></li>
<li></li>
<li></li>

demo

Upvotes: 1

user3528635
user3528635

Reputation: 

<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>
            <li><a href="#"> </a></li> 
        </ul>
    </li>
</ul>

because u missed the cell in thrid row

Upvotes: 3

brance
brance

Reputation: 1178

Just add another empty <li></li> to your last row and it will be fixed, like this:

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

Upvotes: 2

Related Questions