CSS table height of rows not even

问题

I am trying to create a 4x4 array of content using css tables. The cells should be evenly sized. I got a fix to a problem with the cells going out of the parent div. However that broke the height of the cells.

What is wrong here? All the rows should be 25% of the container, with the cells inheriting that. What seems to happen is the first row grows as much as it can, and the 3 remaining ones scale according to the content... Why?

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">

html,body {
    display: block;
    height: 100%;
    width: 100%;    
}

div { 
    display: block;
}

#container {
    background-color: #CCF;
    position: absolute;
    height: 100%;
    width: 100%;
}
.sideBySide {
    position: absolute;
    float: left;
    top: 0px;
    height: 100%;
}

#galleria {
    background-color:#0C0;
    left: 0px;
    right: 300px;
    width: auto;
}

#tagit {
    background-color: #099;
    right: 0px;
    width: 300px;
}

#table {
    position: absolute;
    display: table;
    height: 100%;
    width: 100%;
}

.table-row {
    position: relative;
    display: table-row;
    width: 100%;
    height: 25%;
}

.table-cell {
    position: relative;
    display: table-cell;
    height: 100%;
    width: 20%;

    padding: 20px;
}

.kuva {
    position: relative;
    width: 100%;
    height: 100%;

    margin: 10px;

    background-color: #999;
}

</style>
</head>

<body>
    <div id="container">
        <div id="galleria" class="sideBySide">
            <div id="table">
                <div class="table-row">
                    <div class="table-cell">
                        <div class="kuva">
                        Kuva1
                        </div>

                    </div>
                    <div class="table-cell">
                        <div class="kuva">
                        Kuva2
                        </div>

                    </div>
                    <div class="table-cell">
                        <div class="kuva">
                        Kuva3
                        </div>

                    </div>
                    <div class="table-cell">
                        <div class="kuva">
                        Kuva4
                        </div>

                    </div>
                </div>
                <div class="table-row">
                    <div class="table-cell">
                        <div class="kuva">
                        Kuva1
                        </div>

                    </div>
                    <div class="table-cell">
                        <div class="kuva">
                        Kuva2
                        </div>

                    </div>
                    <div class="table-cell">
                        <div class="kuva">
                        Kuva3
                        </div>

                    </div>
                    <div class="table-cell">
                        <div class="kuva">
                        Kuva4
                        </div>

                    </div>
                </div>
                <div class="table-row">
                    <div class="table-cell">
                        <div class="kuva">
                        text
                        </div>

                    </div>
                    <div class="table-cell">
                        <div class="kuva">

                        </div>

                    </div>
                    <div class="table-cell">
                        <div class="kuva">

                        </div>

                    </div>
                    <div class="table-cell">
                        <div class="kuva">

                        </div>

                    </div>
                </div>
                <div class="table-row">
                    <div class="table-cell">
                        <div class="kuva">
                        test
                        </div>

                    </div>
                    <div class="table-cell">
                        <div class="kuva">

                        </div>

                    </div>
                    <div class="table-cell">
                        <div class="kuva">

                        </div>

                    </div>
                    <div class="table-cell">
                        <div class="kuva">

                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div id="tagit" class="sideBySide">.</div>
    </div>
</body>
</html>

回答1:

just keeping everything in the flow and dispatching display table/table-row/table-cell to different levels you can get to something like this : http://codepen.io/anon/pen/pvDwk

To get rid of scrollbar when table can feet window do not forget to add body{margin:0;}

来源：https://stackoverflow.com/questions/17777281/css-table-height-of-rows-not-even

标签

css

layout

position

css-tables