CODEWITHSUNDEEP
htmlcss
Thant Sin Aung
Thant Sin Aung

Reputation: 722

How to prevent CSS table row expanding to parent height

I'm trying to make a table with CSS display:table display:table-row and display:table-cell. The problem is I can't set the height of table rows. They are expanded to parent height. In my code I set .trow height to 30px but they are expanded to parent height 400px.!important and inline style are not work too. How can I solve this?

P.S So sorry for my poor English.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .table{
            display: table;
            width: 500px;
            border: 1px solid #000000;
            height: 400px;
        }
        .trow{
            height: 30px;
            display: table-row;
            width: 100%;
            background-color: #444444;
        }
        .tcell{
            display: table-cell;
            width: 20%;
            color: #ffffff;
        }
    </style>
</head>
<body>
<div class="table">
    <div class="trow" style="height: 30px">
        <div class="tcell">I'm table cell</div>
    </div>
</div>
</body>
</html>

Upvotes: 2

Views: 3985

Answers (2)

Tschitsch
Tschitsch

Reputation: 1338

this is the default behaviour of a table-cell. if you want the cell not to fill the gap, you have to provide something else that will.

i just added another row:

<div class="trow tfill">
    <div class="tcell"></div>
</div>

that pushes your row to the top of the table

.tfill{
    height: 100%;
    background-color: #fff; 
}

http://jsfiddle.net/vdy4Y/

Upvotes: 0

Michał Rybak
Michał Rybak

Reputation: 8706

Why do you use display: table, if you need non-table behaviour? Default table behaviour (if table height is specified) is to expand row heights until whole table height is filled. This is exactly what you get.

Just remove all display properties and evertything will be fine.

demo here

Upvotes: 2

Related Questions