Html AngularJS/Bootstrap应用程序中不必要的水平滚动条

我尝试使用bootstrap和angularjs创建一个应用程序作为实践，我的应用程序的简化版本如本笔所示：

这是主要代码：

<table class="main" ng-app="app" ng-controller="main">
  <tr>
    <td class="sidebar">
      <!-- Set page using AngularJS -->
      <a ng-click="page = 'fpage'">First Page</a>
      <br>
      <a ng-click="page = 'spage'">Second Page</a>
    </td>
    <td class="content">
      <!-- First Page -->
      <div class="fpage" ng-show="page == 'fpage'">
        <div class="col-md-5">
          .... Content ....
        </div>
      </div>
      </div>
      <!-- Second Page -->
      <div class="spage" ng-show="page == 'spage'">
        <div class="row">
          <div class="col-md-7">
            .... Content ....
          </div>
        </div>
    </td>
  </tr>
</table>

首页


第二页
.... 内容。。。。
.... 内容。。。。

然而，总有这种游离的水平滚动条不会消失。此滚动条仅出现在第二页和后续页中

我尝试将row类添加到fpage和spage div。但是，如果我这样做，那么滚动条将出现在所有页面中

---

为什么会发生这种情况？我如何纠正此问题？

您应该使用

col-md-12

而不是

行

来解决我的问题。谢谢你的帮助。