自举表溢出

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>