css - Bootstrap : How to make table inside another table responsive with horizontal scrollbars on mobile devices?

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>