响应表在水平模式下失败（Bootstrap 3）

Question

虽然我经常是stackoverflow阅读器，但直到今天我还没有写过。我的问题很简单，很容易找不到任何答案。我想你可以帮助我！

我正在为机器编写Web用户界面。一切都很好，我从不同的设备正确获取信息。但是，由于这是我第一次使用Web设计领域（具体到Bootstrap），我遇到了一些数据表示问题。

如您所见，当设备位于vertical时，我有一个正确表示的表格。但是，当设备处于horizontal时，似乎表的“响应性”不起作用，并且表格显示为“变形”。

在我看来很奇怪，因为包含该表的“responsive-table”div是700px，而正如Bootstrap文档所说，它应该显示滚动条（就像在垂直情况下一样）。这是我的代码：

<div id="swPlanStatus-div" class="table-responsive">
    <table id="swPlanStatus-table" class="table">
        <thead>
            <tr>
                <th>
                Node
                </th>
                <th>
                State
                </th>
                <th>
                Substate
                </th>
                <th>
                Group
                </th>
                <th>
                TCP
                </th>
                <th>
                Ctrl Mode
                </th>
                <th>
                Cntrl Type
                </th>
                <th>
                Goal St.
                </th>
                <th>
                Freq.
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>AAAAAAAAAAAAAAAAAAA</td>
                <td>BBBBBBBBBBBBBBBBBBBBBBBB</td>
                <td>CCC</td>
                <td>DDDDDDDD</td>
                <td>EEE</td>
                <td>FFF</td>
                <td>GGG</td>
                <td>HHHHHHH</td>
                <td>IIIIIII</td>
            </tr>
        </tbody>
    </table>

</div> <!-- /.table-responsive div section-->

提前谢谢！