Bootstrap可折叠表行需要将其“隐藏”大小设置为默认值

问题描述 投票：0回答：1

这个问题对我来说很难说。基本上，我创建了一个表，该表使用Bootstrap的collapse类隐藏行。我有一行是“父”行，然后在每个“父”下都有一堆“子”行。我遇到的问题是，每列的宽度由父行的字段的宽度确定，直到我展开然后每列的宽度都会更改以适应子行。

这是我在说的。我们将从看起来像折叠的样子开始：

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9tTE1kRC5wbmcifQ==” alt =“在此处输入图像描述”>

然后展开：

“在此处输入图像描述”

如您所见，列的宽度根据子行是否隐藏而调整。这很令人震惊，因为您正在查看的数据在您身上四处移动。

所以我想发生的是，当引入数据时，列的宽度总是决定为子行可见，即使子行不可见。

显然，如果不将HTML实际解析为HTML，就无法发布HTML。 HTML是由大量难看的JavaScript代码生成的。生成的HTML（通过AJAX调用发送时，我什至无法复制）虽然足够简单。人字形按钮的data-toggle的collapse指向其相应的子行。子级行具有类collapse，另外一个类仅用于标识子级行及其父级行。

[如果有人有任何建议，那就太好了。提前致谢！如果需要更多信息，请告诉我。

html user-interface twitter-bootstrap-3
1个回答
0
投票

我使用此。table {table-layout：fixed;}固定列的css属性，并且在崩溃事件触发后，将hidden row列呈现为parent column width size。希望以下摘要对您有所帮助。 

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>

<style type="text/css">
.table{table-layout: fixed;}
</style>

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-12">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>Action</th>
            <th>Col</th>
            <th>Col</th>
            <th>Col</th>
            <th>Col</th>
            <th>Col</th>
            <th>Col</th>
            <th>Col</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <div class="btn-group btn-group-sm" role="group">
                <button type="button" class="btn btn-default" data-toggle="collapse" data-target=".record1"><span class="glyphicon glyphicon-chevron-down"></span></button>
              </div>
            </td>
            <td>12345</td>
            <td>1</td>
            <td>&nbsp;</td>
            <td>001</td>
            <td>2020-28-1</td>
            <td>2020-28-1</td>
            <td>A</td>
          </tr>
          <tr class="collapse record1">
            <td>&nbsp;</td>
            <td>Max and Amount</td>
            <td>Max and amount per unit</td>
            <td>Pay code</td>
            <td>Rav commit code</td>
            <td>Lorem ipsome</td>
            <td>Lob Code</td>
            <td>Lob criteria</td>
          </tr>
          <tr class="collapse record1">
            <td>&nbsp;</td>
            <td>Max and Amount</td>
            <td>Max and amount per unit</td>
            <td>Pay code</td>
            <td>Rav commit code</td>
            <td>Lorem ipsome</td>
            <td>Lob Code</td>
            <td>Lob criteria</td>
          </tr>
          <tr class="collapse record1">
            <td>&nbsp;</td>
            <td>Max and Amount</td>
            <td>Max and amount per unit</td>
            <td>Pay code</td>
            <td>Rav commit code</td>
            <td>Lorem ipsome</td>
            <td>Lob Code</td>
            <td>Lob criteria</td>
          </tr>
          <!-- // -->
          <tr>
            <td>
              <div class="btn-group btn-group-sm" role="group">
                <button type="button" class="btn btn-default" data-toggle="collapse" data-target=".record2"><span class="glyphicon glyphicon-chevron-down"></span></button>
              </div>
            </td>
            <td>09876</td>
            <td>2</td>
            <td>&nbsp;</td>
            <td>002</td>
            <td>2020-29-1</td>
            <td>2020-29-1</td>
            <td>B</td>
          </tr>
          <tr class="collapse record2">
            <td>&nbsp;</td>
            <td>Max and Amount</td>
            <td>Max and amount per unit</td>
            <td>Pay code</td>
            <td>Rav commit code</td>
            <td>Lorem ipsome</td>
            <td>Lob Code</td>
            <td>Lob criteria</td>
          </tr>
          <tr class="collapse record2">
            <td>&nbsp;</td>
            <td>Max and Amount</td>
            <td>Max and amount per unit</td>
            <td>Pay code</td>
            <td>Rav commit code</td>
            <td>Lorem ipsome</td>
            <td>Lob Code</td>
            <td>Lob criteria</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>




<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.