сворачивание таблицы в виде строки таблицы при нажатии - PullRequest
Новая
       2

сворачивание таблицы в виде строки таблицы при нажатии

0 голосов
/ 12 апреля 2019

Я пытаюсь свернуть строку tr.store-id, в которой содержится таблица при нажатии tr.clickable.

вы можете увидеть мою текущую проблему , представленную в этом 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>

Ответы [ 2 ]

1 голос
/ 12 апреля 2019

Bootstrap устанавливает свойство display: block !important при добавлении класса .show к элементу; хотя вы можете переопределить это, возможно, было бы лучше найти способ быть более конкретным, чтобы избежать изменения классов Bootstrap.

Кроме того: я заметил в вашем коде, что вы используете CSS Bootstrap 3, но JS BS4, вы должны убедиться, что вы используете правильный импорт для правильной версии, 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>
0 голосов
/ 12 апреля 2019

Вам нужно использовать display: table-row;, а не display: block на <tr> при отображении.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...