自舉表溢出

Question

我有兩個並排的表。我有bootstrap網格系統，並且能夠使表格變得動態並且看起來非常漂亮。我的問題是當我動態地添加一個很長的字符串時，表中文本的溢出將表格推入第二個表格。所以它不是很響應。當我沒有超過某個字符數時，它似乎很好用。這是引導表格網格的規則嗎？

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

 
<div class="container"> 
 
    <div class="col-sm-6"> 
 
    <h2 class="sub-header">TITLE</h2> 
 
     <div class="table-responsive"> 
 
      <table class="table table-striped "> 
 
       <thead> 
 
       <tr> 
 
        <th class="col-md-1">Subject</th> 
 
        <th class="col-md-2">Comments</th> 
 
        <th class="col-md-3">Owner</th> 
 
        <th class="col-md-3">Really Long Header that will case the table to overflow</th> 
 
        <th class="col-md-3">Date Activity Logged</th> 
 
       </tr> 
 
       </thead> 
 
       <tbody> 
 
       <tr> 
 
        <td class="col-md-1">1,001</td> 
 
        <td class="col-md-2">1,001</td> 
 
        <td class="col-md-3">1,001</td> 
 
        <td class="col-md-4">1,001</td> 
 
        <td class="col-md-5">1,001</td> 
 
       </tr> 
 
       <tr> 
 
        <td class="col-md-1">1,001</td> 
 
        <td class="col-md-2">1,001</td> 
 
        <td class="col-md-3">1,001</td> 
 
        <td class="col-md-4">1,001</td> 
 
        <td class="col-md-5">1,001</td> 
 
       </tr> 
 
       <tr> 
 
        <td class="col-md-1">1,001</td> 
 
        <td class="col-md-2">1,001</td> 
 
        <td class="col-md-3">1,001</td> 
 
        <td class="col-md-4">1,001</td> 
 
        <td class="col-md-5">1,001111111111111111111111111111</td> 
 
       </tr> 
 
       </tbody> 
 
      </table> 
 
      </div> 
 
    </div> 
 
    <div class="col-sm-6"> 
 
      <h2 class="sub-header">Title Two For Table Two</h2> 
 
      <div class="table-responsive"> 
 
      <table class="table table-striped"> 
 
       <thead> 
 
       <tr> 
 
        <th class="col-md-1">#</th> 
 
        <th class="col-md-2">Header</th> 
 
        <th class="col-md-3">Header</th> 
 
       </tr> 
 
       </thead> 
 
       <tbody> 
 
       <tr> 
 
        <td class="col-md-1">1,001</td> 
 
        <td class="col-md-2">1,001</td> 
 
        <td class="col-md-3">1,001</td> 
 
       </tr> 
 
       <tr> 
 
        <td class="col-md-1">1,001</td> 
 
        <td class="col-md-2">1,001</td> 
 
        <td class="col-md-3">1,001</td> 
 
       </tr> 
 
       <tr> 
 
        <td class="col-md-1">1,001</td> 
 
        <td class="col-md-2">1,001</td> 
 
        <td class="col-md-3">1,001</td> 
 
       </tr> 
 
       </tbody> 
 
      </table> 
 
    </div> 
 
    </div>  
 
    </div>

Answer 1

我剛剛意識到td's有列大小。一旦我從表中的td中刪除"col-md-2"，引導程序就會響應。

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

 

 
<div class="container"> 
 
    <div class="col-sm-6"> 
 
    <h2 class="sub-header">TITLE</h2> 
 
    <div class="table-responsive"> 
 
     <table class="table table-striped "> 
 
     <thead> 
 
      <tr> 
 
      <th>Subject</th> 
 
      <th>Comments</th> 
 
      <th>Owner</th> 
 
      <th>Really Long Header</th> 
 
      <th>Date Activity Logged</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr> 
 
      <td>1,001</td> 
 
      <td>1,001</td> 
 
      <td>1,001</td> 
 
      <td>1,001</td> 
 
      <td>1,001</td> 
 
      </tr> 
 
      <tr> 
 
      <td>1,001</td> 
 
      <td>1,001</td> 
 
      <td>1,001</td> 
 
      <td>1,001</td> 
 
      <td>1,001</td> 
 
      </tr> 
 
      <tr> 
 
      <td>1,001</td> 
 
      <td>1,001</td> 
 
      <td>1,001</td> 
 
      <td>1,001</td> 
 
      <td>1,001</td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
    </div> 
 
    </div> 
 

 

 
    <div class="col-sm-6"> 
 
    <h2 class="sub-header">Title Two For Table Two</h2> 
 
    <div class="table-responsive"> 
 
     <table class="table table-striped"> 
 
     <thead> 
 
      <tr> 
 
      <th>Comment</th> 
 
      <th>Created By</th> 
 
      <th>Case/Merchant Number</th> 
 
      <th>Created Time</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr> 
 
      <td>1,001</td> 
 
      <td>1,001</td> 
 
      <td>1,001</td> 
 
      <td>1,001</td> 
 
      </tr> 
 
      <tr> 
 
      <td>1,001</td> 
 
      <td>1,001</td> 
 
      <td>1,001</td> 
 
      <td>1,001</td> 
 
      </tr> 
 
      <tr> 
 
      <td>1,001</td> 
 
      <td>1,001</td> 
 
      <td>1,001</td> 
 
      <td>1,001</td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
    </div> 
 
    </div> 
 
</div>