css positioning tables next to each other

问题

Using the HTML/CSS below I have 3 tables. I would like table 1 and 2 to be next to each other on the "same line" with table 3 underneath but with a break between them.

However, when I use float:left/right on the first two tables, table 3 is ALWAYS directly underneath and "touching" tables1/2?

I have tried margin/clear/float and can't seem to make things line up :(

Any help gratefully received.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
    <style type="text/css">
        DIV.search
        {
            width: 80%;
            margin-right: auto;
            margin-left: auto;
        }

        DIV.search TABLE
        {
            border: 1px solid black;
            border-collapse: separate;
        }

        DIV.search TABLE.table1
        {
            float: left;
            width: 45%;
        }

        DIV.search TABLE.table2
        {
            float: right;
            width: 45%;
        }

        TABLE.table3
        {
            border: 1px solid black;
            margin-top: 50px;
            margin-right: auto;
            margin-left: auto;
            width: 80%;
        }
    </style>
</head>
<body>
    <div class="search">
        <table class="table1">
            <tr>
                <td>
                    TABLE 1
                </td>
            </tr>
        </table>
        <table class="table2">
            <tr>
                <td>
                    TABLE 2
                </td>
            </tr>
        </table>
    </div>
    <table class="table3">
        <tr>
            <td>
                TABLE 3
            </td>
        </tr>
    </table>
</body>
</html>

回答1:

You should apply some additional styles:

DIV.search
{
    width: 80%;
    margin-right: auto;
    margin-left: auto;

    overflow: hidden; /* Fixing the problem in modern browsers */
    zoom: 1; /* Fixing in old IE by applying hasLayout */
    padding-bottom: 50px; /* I prefer padding here than margin in table3 */
}

TABLE.table3
{
    border: 1px solid black;
    /* margin-top: 50px; */
    margin-right: auto;
    margin-left: auto;
    width: 80%;
}

You can try to use :after (in the answer below), but old IE doesn't support it.

回答2:

I know this is a bit late but a similar solution may be to but in the css "display:inline-block" but there is also "display:inline-table". Worked for me :)

Also, an additional thing working for me was using "float:left"

See here

来源：https://stackoverflow.com/questions/6548880/css-positioning-tables-next-to-each-other

标签

html

css

positioning