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

Question

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.

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

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>

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

Sign up