Css 引导：如何在移动设备上使用水平滚动条使另一个表中的表响应？

我知道

表响应类

但它在这里不起作用，它破坏了用户界面。 我的代码如下所示：

概述
设备ID
最后一读
演示1
读数：R1
警报和时间表
设备ID
细节
开发1
预定上午10:00休息

试试这个，这个会有用的

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div class="table-responsive">
        <table class="table table-bordered">
          <th colspan="3">Outer Table</th>
          <tr>
            <td>This is row one, column 1</td>
            <td>This is row one, column 2</td>

            <td>
              <table class="table table-bordered">
                <th colspan="3">Inner Table</th>
                <tr>
                  <td>This is row one, column 1</td>
                  <td>This is row one, column 2</td>
                  <td>This is row one, column 3</td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>

外桌
这是第一行第1列
这是第一行第二列
内桌
这是第一行第1列
这是第一行第二列
这是第一行第三列

---

你可以这样做

<style>
.home-cell.table-responsive {
    width: 150px;
    overflow: auto !important;
    display: inline-block;
}
table .table-bordered {
    width: 190px;
    min-width: 270px;
}
</style>


<table id="home-table">
  <tbody>
    <tr>
      <td class="home-cell table-responsive">
          <table class="table table-bordered">
            <caption>Overview</caption>
              <thead>
                <tr>
                  <th>Device ID</th>
                  <th>Last Reading</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>Demo 1</td>
                  <td>Reading: R1</td>
                </tr>
              </tbody>
            </table>
        </td>

        <td class="home-cell table-responsive">
          <table class="table table-bordered">
            <caption>Alarms and Schedules</caption>
            <thead>
              <tr>
                <th>Device ID</th>
                <th>Details</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Dev 1</td>
                <td>Scheduled 10:00 AM OFF</td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
</table>

.home-cell.table-responsive{
宽度：150px；
溢出：自动！重要；
显示：内联块；
}
桌子，有边框的桌子{
宽度：190px；
最小宽度：270px；
}
概述
设备ID
最后一读
演示1
读数：R1
警报和时间表
设备ID
细节
开发1
预定上午10:00休息

写入css溢出：在表的父级上自动。它会起作用的，但没有起作用。内部表格应单独添加滚动条。主表中有2个表，每个表都需要有单独的滚动条。