使现有 bootstrap 2 table 响应

Question

我正在做一个项目，我需要更改现有的 Boostrap2 table 响应。我做了一个fiddle

<table class="table head center">
    <caption></caption>
    <tr>
    <th scope="col">Member</th>
    <th scope="col">Date</th>
    <th scope="col">Usage</th>
    <th scope="col">Native</th>
    <th scope="col">Coverage</th>
    <th scope="col"></th>
    </tr>
    <tr id="members-repeat-container" ng-repeat="">
    <td>You</td>
    </tr>
   </table>

Answer 1

仅此而已。包装器：

@media screen and (max-width: 767px) {
  .responsive-table {
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
  }
}

@media screen and (max-width: 767px) {
  .responsive-table {
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />

<div class="responsive-table">
 <table class="table head center">
    <caption></caption>
    <tr>
    <th scope="col">Member</th>
    <th scope="col">Date</th>
    <th scope="col">Usage</th>
    <th scope="col">Native</th>
    <th scope="col">Coverage</th>
    <th scope="col"></th>
    </tr>
    <tr id="members-repeat-container" ng-repeat="">
    <td>You</td>
    <td>
      <input name='age' class="member-birthday input-small" ng-class="member.preloaded" type="text" name="birthdate@@$index + 1@@" id="birthdate@@$index+1@@" placeholder="mm/dd/yyyy" ui-mask="99/99/9999" ui-mask-use-viewvalue="true" ng-model="member.birthday" date-check mtype="@@member.type@@" order="@@$index@@" popover="@@member.errorMsg@@" trigger-click="@@member.errorMsg@@" popover-trigger="blur" popover-placement="right" required test-check="@@$index@@">
    </td>
    <td>
      <label for="tobacco@@ member.id @@" class="aria-hidden hide">Usage
       </label>
       <input class="tobacco-input" type="checkbox" name="tobacco@@ member.id @@" id="tobacco@@ member.id @@" ng-disabled="member.disableTobacco" />
    </td>
    <td>
      <label for="nativeAmerican@@ member.id @@" class="aria-hidden hide"> Native
       </label>
       <input class="coverage-input" type="checkbox" name="nativeAmerican@@ member.id @@" id="nativeAmerican@@ member.id @@" ng-model="member.nativeAmerican"/>
    </td>
    <td>
      <label for="coverage@@ member.id @@" class="aria-hidden hide"> 
        Coverage
       </label>
       <input class="coverage-input" type="checkbox" name="coverage@@ member.id @@" id="coverage@@ member.id @@" ng-model="member.seekingCoverage" ng-click="seekCoverage($index)"/>
    </td>
    <td class="removebtn">
       <a href="javascript:void(0);" ng-show="member.removable" ng-click="remove($index, member.type)" class="btn btn-mini">
        <spring:message code="label.iex.prescreen.remove" javaScriptEscape="true"/>
       </a>
      </td>
    </tr>
</table>
</div>

Answer 2

我更改了结构并添加了一些来自 Bootstrap3 的网格类。我得到了预期的结果

使现有 bootstrap 2 table 响应

Make existing bootstrap 2 table responsive

html

css

twitter-bootstrap-2

responsiveness