引导响应表在 html 表中不起作用

Question

正如标题所示，表中的表不适用于引导响应表/表类。顶表就是一个例子。

这是与涉及“fieldset”元素的解决方案最接近的示例。

这是link

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

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

Answer 1

外部表也应该有类 .table 和 .table-responsive 所以，

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