Question

是否可以将2个表彼此相邻对齐，即使第一个表比窗口宽？

我试过了：

display:inline-block;
float:left;

但显然，这不是正确的做法。

看来，第二个表总是移动到下一行，只要第一个表至少100％宽。这在大多数情况下显然是有意义的，但我在第二个中显示的数据与第一个中的数据相关。

是否可以强制第二个表格显示在第一个表格旁边？

Answer 1

您可以将表放在一个总体表中，在一个滚动的包装器中。

如果你自己给表格大尺寸...... they still wont wrap

Demo Fiddle

HTML

<div class="wrapper">
    <div class="content">
        <div class='column'>
            <table border="1">
                <tr>
                    <td>t1</td>
                    <td>col text blah blah blah</td>
                    <td>col text blah blah blah</td>
                    <td>col text blah blah blah</td>
                    <td>col text blah blah blah</td>
                    <td>col text blah blah blah</td>
                    <td>col text blah blah blah</td>
                </tr>
            </table>
        </div>
        <div class='column'>
            <!-- blah -->
            <table border="1">
                <tr>
                    <td>t2</td>
                    <td>col text blah blah blah</td>
                    <td>col text blah blah blah</td>
                    <td>col text blah blah blah</td>
                    <td>col text blah blah blah</td>
                    <td>col text blah blah blah</td>
                    <td>col text blah blah blah</td>
                    <td>col text blah blah blah</td>
                    <td>col text blah blah blah</td>
                </tr>
            </table>
        </div>
    </div>
</div>

CSS

.wrapper {
    width: 100%;
    background-color:#355E95;
    overflow:scroll;
}
.content {
    display:table;
}
.column {
    display:table-cell;
}
table {
    width:1500px;
}

在滚动的容器中将表彼此相邻对齐

1 个答案:

Demo Fiddle