表列中的`.responsive-table`不会创建滚动条

Question

我在responsive-table内td colspan。而不是responsive-table限制宽度并为内部表创建滚动条，它将表拉伸为对于屏幕来说太大。除了在css responsive-table上设置明确的宽度之外，是否可以添加任何div来实现此功能？

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<div style="width: 50px">
  <table class="table table-striped table-bordered">
    <tbody>
      <tr>
        <td>Column 1</td>
        <td>Column 2</td>
      </tr>
      <tr>
        <td colspan="2">
          <div class="table-responsive">
            <table class="table table-bordered">
              <tbody>
                <tr>
                  <td>Test1</td>
                  <td>Test2</td>
                  <td>Test3</td>
                  <td>Test4</td>
                  <td>Test5</td>
                  <td>Test6</td>
                  <td>Test7</td>
                  <td>Test8</td>
                  <td>Test9</td>
                  <td>Test10</td>
                  <td>Test11</td>
                  <td>Test12</td>
                  <td>Test13</td>
                  <td>Test14</td>
                  <td>Test15</td>
                  <td>Test16</td>
                  <td>Test17</td>
                </tr>
              </tbody>
            </table>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

我希望它看起来像这样，而不需要在div内的td上设置明确的宽度。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<div style="width: 50px">
  <table class="table table-striped table-bordered">
    <tbody>
      <tr>
        <td>Column 1</td>
        <td>Column 2</td>
      </tr>
      <tr>
        <td colspan="2">
          <div class="table-responsive" style="width: 50px">
            <table class="table table-bordered">
              <tbody>
                <tr>
                  <td>Test1</td>
                  <td>Test2</td>
                  <td>Test3</td>
                  <td>Test4</td>
                  <td>Test5</td>
                  <td>Test6</td>
                  <td>Test7</td>
                  <td>Test8</td>
                  <td>Test9</td>
                  <td>Test10</td>
                  <td>Test11</td>
                  <td>Test12</td>
                  <td>Test13</td>
                  <td>Test14</td>
                  <td>Test15</td>
                  <td>Test16</td>
                  <td>Test17</td>
                </tr>
              </tbody>
            </table>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

试试这个。我不确定你是否需要50px宽，如果只是改变风格=＆＃34;宽度：100％＆＃34; to style =＆＃34; width：50px％＆＃34;。

＆＃13;

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />


<div class="table-responsive" style="width: 100%">
  <table class="table table-striped table-bordered">

    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Test1</td>
              <td>Test2</td>
              <td>Test3</td>
              <td>Test4</td>
              <td>Test5</td>
              <td>Test6</td>
              <td>Test7</td>
              <td>Test8</td>
              <td>Test9</td>
              <td>Test10</td>
              <td>Test11</td>
              <td>Test12</td>
              <td>Test13</td>
              <td>Test14</td>
              <td>Test15</td>
              <td>Test16</td>
              <td>Test17</td>
      </tr>
      
    </tbody>
  </table>
</div>

＆＃13;

＆＃13;

＆＃13;