css - `.responsive-table` 表格列内没有创建滚动条

Question

我在 td 中有一个 responsive-table 和一个 colspan。 responsive-table 没有限制宽度并为内部表格创建滚动条，而是将表格拉伸(stretch)到屏幕太大。除了在 responsive-table div 上设置显式宽度之外，是否可以添加任何 css 来使这项工作正常进行？

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

我希望它看起来像这样，而不需要在 td 内的 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" 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 宽，如果只是将 style="width: 100%"更改为 style="width: 50px%"。

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