Bootstrap响应表在html表中不起作用

Question

正如标题所示，表中的表将无法与bootstraps响应表/表类一起使用。顶部表就是一个例子。

这是涉及＆＃34; fieldset＆＃34;的解决方案的最接近的示例。元件。

这里是link

＆＃13;

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
	<tbody>
		<tr>
			<td>
              
              
				<div class="table-responsive">
                  
					<table class="table">
						<thead>
							<tr>
								<th>Table Header</th>
								<th>Table Header</th>
								<th>Table Header</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>Table Data</td>
								<td>Table Data</td>
								<td>Table Data</td>
							</tr>
							<tr>
								<td>Table Data</td>
								<td>Table Data</td>
								<td>Table Data</td>
							</tr>
						</tbody>
					</table>
                  
				</div>
              
              
			</td> 
		</tr>
	</tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

＆＃13;

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-responsive">

  <table class="table">
    <thead>
      <tr>
        <th>Table Header</th>
        <th>Table Header</th>
        <th>Table Header</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
      </tr>
      <tr>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
      </tr>
    </tbody>
  </table>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

外表还应具有类.table和.table-responsive so

＆＃13;

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-responsive">
	<tbody>
		<tr>
			<td>
              
              
				<div class="table-responsive">
                  
					<table class="table">
						<thead>
							<tr>
								<th>Table Header</th>
								<th>Table Header</th>
								<th>Table Header</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>Table Data</td>
								<td>Table Data</td>
								<td>Table Data</td>
							</tr>
							<tr>
								<td>Table Data</td>
								<td>Table Data</td>
								<td>Table Data</td>
							</tr>
						</tbody>
					</table>
                  
				</div>
              
              
			</td> 
		</tr>
	</tbody>
</table>

＆＃13;

＆＃13;

＆＃13;