0
我有两个并排的表。我有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>