Question

Bootsrap响应表的工作方式如下：

<div class="table-responsive">
<table class="table"><tr><td>responsive working</td></tr></table>
</div>

但是当我在主表单元格（td）中使用内部响应表不起作用时。我们可以做些什么来解决它？

<table>
<tr>
<td>

<div class="table-responsive">
<table class="table">now not responsive</table>
</div>

</td>
</tr>
</table>

Answer 1

你可以这样做，问题是你还没有指定默认表类，它带有bootstrap＆＃34; table＆＃34;你必须先提到它。不是table-responsive，必须是table table-responsive

＆＃13;

<html>
<head>
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
  <meta charset="utf-8">
</head>
<body>
<table class="table table-responsive">
  <th colspan="3">Outer Table</th>
  <tr>
    <td>This is row one, column 1</td>
    <td>This is row one, column 2</td>
    
    <td>
      <table class="table table-responsive">
        <th colspan="3">Second Inner Table</th>
        <tr>
          <td>This is row one, column 1</td>
          <td>This is row one, column 2</td>
          <td>This is row one, column 3</td>
        </tr>
      </table>
    </td>
  </tr>
</table>
  

</body>
</html>

＆＃13;

Bootsrap响应表不在主表td单元中工作

1 个答案: