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

Question

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

我希望它始终像这样显示一行文字（确定）：

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

未定义列宽，因为它也随所显示的文本而变化。

无论用户选择多少列，我如何确保该行始终像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>

我正在建立一个动态表，该表由1-50列组成，具体取决于用户选择的内容。当用户选择1-6列时，将所有数据显示在屏幕上都没有问题，但是当...

Answer 1

[尝试将此CSS添加到表元素中：white-space: nowrapjsFiddle