使现有的bootstrap 2表响应

Question

我正在开展一个项目，我需要更改现有的Boostrap2表格。我做了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;
  }
}

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

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