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

Question

我正在构建一个动态表,其中包含1-50列,具体取决于用户选择的内容.当用户选择1-6 列时,在屏幕上显示数据没有问题(参见例1),但当用户选择6列以上时,表会尝试在屏幕上一起挤压视图,导致每行被扩展到多行(见例2).

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

无论用户选择了多少列,如何确保行总是像ex.1一样？

我有这个代码的JSFiddle演示:

<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