如何为引导表创建水平滚动条

Question

我有包含12列的下表：

我想添加一个水平滚动条并增加列的宽度。一些列需要输入大值，因此我不希望它们缩小。

代码：

  <div class="container">
    <div class="row">
      <div class="col-md-12">   
        <div class="table-responsive">
          <table class="table table-striped table-bordered table-condensed">
            <thead>
              <tr>
                <th scope="col" class="col-lg-1"></th>
                <th scope="col" class="col-lg-3">DBID</th>
                <th scope="col" class="col-lg-3">LDAP</th>
                <th scope="col">Zuora</th>
                <th scope="col">FirstName</th>
                <th scope="col">LastName</th>
                <th scope="col">PrimaryEmail</th>
                <th scope="col">SecondaryEmail</th>
                <th scope="col">PayType</th>
                <th scope="col">Status</th>
                <th scope="col">InstanceType</th>
                <th scope="col">MaxActiveConn</th>
                <th scope="col">AuthTokenLimit</th>
              </tr>
            </thead>
            <tr ng-repeat="eachUser in Users">
              <td> <input required type="text"></td>
              <td> <input required type="text"></td>
              <td> <input required type="text"></td>
              <td> <input required type="text"></td>
              <td> <input required type="text"></td>
              <td> <input required type="text"></td>
              <td> <input required type="text"></td>
              <td> <input required type="text"></td>
              <td> <input required type="text"></td>
              <td> <input required type="text"></td>
              <td> <input required type="text"></td>
              <td> <input required type="text"></td>
            </tbody>
          </table>
        </div>
      </div>

Answer 1

您必须将.table-responsive类添加到<table>标记中。