当表比屏幕宽时，强制引导表中的每一行为单行

Question

我正在构建一个动态表，该表由 1-50 列组成，具体取决于用户选择的内容。当用户选择 1-6 列时，在屏幕上显示所有数据没有问题，但是当用户选择超过 6 列时，表格会尝试在屏幕上将视图挤在一起，导致每一行都扩展为多行。

我希望它始终在一行中显示文本，如下所示（OK）：

但是有很多列会将文本换成两行或更多行（不行）：

未定义列宽，因为它也会根据要显示的文本而变化。

无论用户选择多少列，我如何确保该行始终像 ex.1 一样单行？

我有这个JSFiddle demo 上面两个例子的代码：

<table class='table'>
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
            <th>Column 4</th>
            <th>Column 5</th>
            <th>Column 6</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1</td>
            <td>Row 11</td>
            <td>Row 11 1</td>
            <td>Row 11 11</td>
            <td>Row 11 11 1</td>
            <td>Row 11 11 11</td>
        </tr>
        <tr>
            <td>Row 2</td>
            <td>Row 22</td>
            <td>Row 22 2</td>
            <td>Row 22 22</td>
            <td>Row 22 22 2</td>
            <td>Row 22 22 22</td>
        </tr>
    </tbody>
</table>

Answer 1

尝试将此 CSS 添加到您的表格元素中： white-space: nowrap jsFiddle