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

Question

我有一个responsive-table在td与colspan。代替responsive-table限制宽度并为内部表格创建滚动条，它将表格拉伸到对于屏幕来说太大。是否有任何css可以添加到使这项工作，而不是在responsive-tablediv设置明确的宽度？

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