Moowabo Moowabo - 4 years ago 57
CSS Question

Divs in table-cell have a weired gap and dosn't fixed, please help me

First, forgive my English.
I have a big problems in coding css.

I make a table with ul,li and divs.
Here is my codes.



.mwbtable {display:table; width:100%; border-collapse:collapse; }
.t-row {display:table-row; height:40px; line-height:40px; }
.t-cell1, .t-cell2, .t-cell3 {display:table-cell; }
.t-cell1 {width:100px; background:#ccc; }
.t-cell2 {background:#ddd; }
.t-cell3 {width:340px; background:#777; }
.t-cell3 .order {}
.order > div {display:inline-block; float:left; }
.list1 {width:100px; text-align:center; }
.list2 {width:50px; text-align:center; }
.list3 {width:100px; text-align:center; }
.list4 {width:90px; text-align:center; }

<ul class="mwbtable">
<li class="t-row">
<div class="t-cell1">tc1</div>
<div class="t-cell2">tc2</div>
<div class="t-cell3">
<div class="order">
<div class="list1">1</div>
<div class="list2">2</div>
<div class="list3">3</div>
<div class="list4">4</div>
</div>
</div>
</li>
</ul>





Before I typed "tc1", "tc2", It was good.
But I type something in div.t-cell1 or dic.t-cell2, It has wrong height.

I don't know what I missed.
Please tell me correct codes.

Answer Source

The odd spacing is due to the vertical alignment.

I've attached a snippet which resolves the problem by setting your three cells to vertical-align: top;.

.mwbtable {display:table; width:100%; border-collapse:collapse; }
.t-row {display:table-row; height:40px; line-height:40px; }
.t-cell1, .t-cell2, .t-cell3 {display:table-cell; vertical-align: top; }
.t-cell1 {width:100px; background:#ccc; }
.t-cell2 {background:#ddd; }
.t-cell3 {width:340px; background:#777; }
.t-cell3 .order {}
.order > div {display:inline-block; float:left; }
.list1 {width:100px; text-align:center; }
.list2 {width:50px; text-align:center; }
.list3 {width:100px; text-align:center; }
.list4 {width:90px; text-align:center; }
<ul class="mwbtable">
    <li class="t-row">
        <div class="t-cell1">tc1</div>
        <div class="t-cell2">tc2</div>
        <div class="t-cell3">
            <div class="order">
                <div class="list1">1</div>
                <div class="list2">2</div>
                <div class="list3">3</div>
                <div class="list4">4</div>
            </div>
        </div>
    </li>
</ul>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download