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

Question

我知道table-responsive类，但它在这里不起作用，并且破坏了UI。我的代码如下所示：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<table id="home-table">
  <tr>
    <td class='home-cell'>
      <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 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>
</table>

如何在主表内的两个表中实现单独的响应式水平滚动条？

Answer 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>

Answer 2

试试这个，这将起作用

<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>

https://jsfiddle.net/DTcHh/38830/