单击时将表格折叠为表格行答案

【问题标题】：collapsing table as a table row on click单击时将表格折叠为表格行
【发布时间】：2019-04-13 01:02:38
【问题描述】：

当单击tr.clickable 时，我试图折叠其中包含一个表格的tr.store-id 行。

你可以看到我当前的问题presented in this jsfiddle，表格似乎在出现后自我调整以适应列title1！。我希望可折叠表格适合整行而不是一列。

我尝试将.collapse 的display 属性更改为table-row 等值，但没有成功。谁能告诉我是什么问题？

<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <style>
    tr.collapse.in {
      display: table-row;
    }
  </style>
</head>

<body>

  <div class="container">
    <table class="table table-bordered">
      <thead>
        <tr>
          <th scope="col">title1</th>
          <th scope="col">title2</th>
          <th scope="col">title3</th>
        </tr>
      </thead>
      <tbody>

        <tr data-toggle="collapse" data-target=".store-id" class="clickable">
          <td>hi there</td>
          <td>hi there</td>
          <td>hi there</td>
        </tr>
        <tr class="collapse store-id">
          <td colspan="3">
            <table class="table">
              <thead>
                <tr>
                  <th scope="col">#</th>
                  <th scope="col">First</th>
                  <th scope="col">Last</th>
                  <th scope="col">Handle</th>
                  <th scope="col">Handle</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                  <td>@mdo</td>
                  <td>@mdo</td>
                </tr>
                <tr>
                  <td>Jacob</td>
                  <td>Thornton</td>
                  <td>@fat</td>
                  <td>@fat</td>
                  <td>@fat</td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

【问题讨论】：

寻求调试帮助的问题（“为什么这段代码不起作用？”）必须在问题本身中包含所需的行为、特定问题或错误以及重现它所需的最短代码。 stackoverflow.com/help/on-topic 不接受指向第三方网站的链接。
@Rob，我希望可折叠的表格适合整行而不是一列

标签： css twitter-bootstrap-3

【解决方案1】：

Bootstrap 在将.show 类添加到元素时设置属性display: block !important；虽然您可以覆盖它，但最好找到一种更具体的方法以避免更改 Bootstrap 类。

另外：我在您的代码中注意到您使用的是 Bootstrap 3 的 CSS，但 BS4 的 JS，您应该确保为正确的版本使用正确的导入，无论是 v3 还是 v4

查看示例：

<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <style>
    tr.show {
      display: table-row !important;
    }
  </style>
</head>

<body>

  <div class="container">
    <table class="table table-bordered">
      <thead>
        <tr>
          <th scope="col">title1</th>
          <th scope="col">title2</th>
          <th scope="col">title3</th>
        </tr>
      </thead>
      <tbody>

        <tr data-toggle="collapse" data-target=".store-id" class="clickable">
          <td>hi there</td>
          <td>hi there</td>
          <td>hi there</td>
        </tr>
        <tr class="collapse store-id">
          <td colspan="3">
            <table class="table">
              <thead>
                <tr>
                  <th scope="col">#</th>
                  <th scope="col">First</th>
                  <th scope="col">Last</th>
                  <th scope="col">Handle</th>
                  <th scope="col">Handle</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                  <td>@mdo</td>
                  <td>@mdo</td>
                </tr>
                <tr>
                  <td>Jacob</td>
                  <td>Thornton</td>
                  <td>@fat</td>
                  <td>@fat</td>
                  <td>@fat</td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

【讨论】：

您的答案对我来说非常有效。非常感谢先生:)
我才 24 岁 :( 哈哈，但不客气；注意 Bootstrap 版本问题，确保对所有导入都使用相同的版本，以避免将来出现任何奇怪的行为跨度>
没问题的少爷;)，我记下了bootstrap版本。再次感谢:)

【解决方案2】：

您需要在显示时在<tr> 上使用display: table-row; 而不是display: block。

【讨论】：

这就是我的代码目前的样子..但仍然无法正常工作：/