A CSS table in one of parallel divs

问题

On a webpage I have a container div and inside it two divs next to each other. In the first inner div I am trying to set up a CSS table that has 4 columns that evenly fill the div.

The problem I am having is that the cells seem to get their width relative to the page's width, not the table/it's parent div. If I decrease the width from 25% to something lower, it will fit, but if I scale the page, they will still wrap, as the div on the right hits the rightmost table cell.

How should I setup the layout to keep them inside the div?

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <style type="text/css">
            html,body, div {
                display: block;
                height: 100%;
                width: 100%;    
            }

            #container {
                position: absolute;
                height: 300px;
                width: 100%;
            }
            .sideBySide {
                position: absolute;
                float: left;
                height: 100%;
            }

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

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

            #table {
                position: absolute;
                margin: 0px;
                padding: 0px;
                display: table;
                height: 100%;
                width: 100%;
            }

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

            .table-cell {
                position: relative;
                margin: 0px;
                padding: 0px;
                display: table-cell;
                float: left;
                height: 100%;
                width: 25%;

                padding: 20px;
            }

            .kuva {
                position: relative;
                margin: 0px;
                padding: 0px;
                width: 100%;
                height: 100%;

                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">Cell1</div>
                        </div>
                        <div class="table-cell">
                            <div class="kuva">Cell2</div>
                        </div>
                        <div class="table-cell">
                            <div class="kuva">Cell3</div>
                        </div>
                        <div class="table-cell">
                            <div class="kuva">Cell4</div>                       
                        </div>
                    </div>
                </div>
             </div>
        </div>
    </body>
</html>

回答1:

Remove

float: left;

from

.table-cell

来源：https://stackoverflow.com/questions/17776554/a-css-table-in-one-of-parallel-divs

标签

html

css

layout

position

css-tables