表中的`.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>