Question

所以我在页面上动态创建表，每个表中的行也是动态的。我希望将它们全部显示在一行中并使它们水平滚动，如果有溢出而不是包装。我设置了内联和溢出滚动：

.tableDiv {width:100%; overflow:scroll; display:inline}

但他们还在包装。任何有关这方面的帮助将不胜感激！

这是jsfiddle：http://jsfiddle.net/xAxfr/

Answer 1

http://jsfiddle.net/xAxfr/2/

.tableDiv {
    width:100%;
    overflow:auto;
    white-space:nowrap;
}

.table {
    border-collapse:collapse;
    border-spacing:0;
    display:inline-block;
}

white-space:nowrap;和display:inline-block;

Answer 2

移除float: left上的.table并在white-space: nowrap上添加.tableDiv。

http://jsfiddle.net/xAxfr/1/

Answer 3

我认为您可以使用here所述的“表格方法”。如果您在另一个表中而不是div中使用表，则可以根据需要创建相同效果的行。

离。

<table class="tableContainer">
   <tr> 
    <td>
    <table class="table">
        <tr>
            <th colspan="2">
                Table One
            </th>
        </tr>
        <tr>
            <td>
                two
            </td>
            <td>
                three
            </td>
        </tr>
        <tr>
            <td>
                four
            </td>
            <td>
                five
            </td>
        </tr>
    </table></td>
    <td>
    <table class="table">
        <tr>
            <th colspan="2">
                Table Two
            </th>
        </tr>
        <tr>
            <td>
                two
            </td>
            <td>
                three
            </td>
        </tr>
        <tr>
            <td>
                four
            </td>
            <td>
                five
            </td>
        </tr>
    </table></td>

使用滚动使多个表格显示在一行中

3 个答案: