Bootstrap Table 溢出

Question

我有两个 table 并排。我有 bootstrap 网格系统，并且能够让 table 变得动态并且看起来很漂亮。我的问题是当我动态添加一个冗长的字符串时，table 中的文本溢出将 table 推到第二个 table 中。所以它不是很敏感。当我不超过某个字符数时，它似乎效果很好。这是bootstraptable格子的规则吗？

  <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 有列大小。一旦我从 table 中的 td 中删除了 "col-md-2"，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>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>

Bootstrap Table 溢出

Bootstrap Table Overflow

html

css

html-table

overflow

bootstrap-4