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

Question

即使第一个表比窗口宽，是否可以将 2 个表并排对齐？

小提琴示例：http://jsfiddle.net/XqSJG/69/

我试过了：

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;
}