Bootstrap テーブルのcollapse開閉がうまくできない

#概要

phpで日本語学習用に４択クイズができるサイトを作っています。
デザインは、Bootstrapに依存しています。
ユーザー登録できるようにしており、ユーザーの成績が見れるページを作っています。
ユーザーの成績をテーブルで一覧にしたいと思っています。

教科は、総合、カタカナ、漢字とあるのですが、
漢字は、さらに、
漢字＿形容詞
漢字＿顔、体
漢字＿カレンダー
漢字＿家族
と細かく４つに分かれています。

そこで、テーブルを以下の画像のようにできないかなと考えました。

#やりたいこと

画像のように、テーブルの[漢字]の部分をクリックすると、

隠されていた[漢字＿形容詞]、[漢字＿顔、体]、[漢字＿カレンダー]、[漢字＿家族]
が開きます

以上がやりたいことですが、うまくいきません。
#以下の画像のように、閉じている時に、隙間が出てしまいます。

どうすればよいでしょうか？

#コードを以下に記します

<?php session_start(); ?>
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>おにべん ONI-BEN</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">



</head>
<body>

<div class="container">

<!--サイドバー ここから-->
<?php 
include('sidebar_top.php'); 
?>
<!--サイドバー ここまで-->

<nav class="navbar navbar-dark  p-0 mt-1 mb-1">
  <div class="container-fluid justify-content-end">
    <h5 class="text-primary"><?php echo htmlspecialchars($_SESSION["user_id"], ENT_QUOTES); ?> さん ログイン中</h5>
  </div>
</nav>


<div class = "row">
<div class = "col-md-12 mt-2 mb-4" align = center>
<h2><?php echo htmlspecialchars($_SESSION["user_id"], ENT_QUOTES); ?>のHISTORY</h2>
</div>
</div>


<div class="row">

  <div class="col-4">
  <a class="btn btn-danger btn-lg btn-block mt5 mb-5"  href="" role="button">This Week</a>
  </div>

  <div class="col-4">
  <a class="btn btn-light btn-lg btn-block mt5 mb-5"  href="" role="button">Last Week</a>
  </div>
  <div class="col-4">
  <a class="btn btn-light btn-lg btn-block mt5 mb-5"  href="" role="button">All</a>
  </div>

</div>

<?php

$user_id = $_SESSION["user_id"];

require_once('config.php');
$dsn = 'mysql:host=' . $config['host'] . '; dbname=' . $config['database'] . '; charset=utf8';
$user = $config['user'];
$password = $config['password'];

include('function_record_thisw.php'); 

?>


<nav class="navbar navbar-dark bg-dark">
  <div class="container-fluid">
    <span class="navbar-brand">N5</span>
  </div>
</nav>


<table class="table table-bordered table-sm" >

  <thead>
    <tr>
      <th>
      </th>
      <th>
        <small>問題数</small>
      </th>
      <th>
        <small>正解数</small>
      </th>
      <th>
        <small>正解率</small>
      </th>
    </tr>
  </thead>

  <tbody>
  <!-- 総合-->
    <tr>
      <td>
        <small>総合</small>
      </td>
      <td>
        <small><?php echo $all_thisw_test;?></h5></small>
      </td>
      <td>
        <small><?php echo $all_thisw_correct;?></h5></small>
      </td>
      <td>
        <small><?php echo $all_thisw_rate;?>%</h5></small>
      </td>
    </tr>

<!-- カタカナ-->

    <tr>
      <td>
        <small>カタカナ</small>
      </td>
      <td>
        <small><?php echo $thisw_test2;?></h5></small>
      </td>
      <td>
        <small><?php echo $thisw_correct2;?></h5></small>
      </td>
      <td>
        <small><?php echo $thisw_rate2;?>%</h5></small>
      </td>
    </tr>


<!-- 漢字-->

    <tr class="header expand">
      <td data-toggle="collapse" data-target=".collapse0" aria-expanded="true"><small>漢字</small>
      </td>
      <td>
        <small>test</small>
      </td>
      <td>
        <small>test</small>
      </td>
      <td>
        <small>%</small>
      </td>
    </tr>
  
    <tr>
      <td>
      <div class="collapse show collapse0">
        <small>漢字＿形容詞</small>
      </div>
      </td>
      <td>
      <div class="collapse show collapse0">
        <small><?php echo $thisw_test3;?></h5></small>
      </div>
      </td>
      <td>
      <div class="collapse show collapse0">
        <small><?php echo $thisw_correct3;?></h5></small>
      </div>
      </td>
      <td>
      <div class="collapse show collapse0">
        <small><?php echo $thisw_rate3;?>%</h5></small>
      </div>
      </td>
    </tr>

    <tr>
      <td>
      <div class="collapse show collapse0">
        <small>漢字＿顔、体</small>
      </div>
      </td>
      <td>
      <div class="collapse show collapse0">
        <small><?php echo $thisw_test4;?></h5></small>
      </div>
      </td>
      <td>
      <div class="collapse show collapse0">
        <small><?php echo $thisw_correct4;?></h5></small>
      </div>
      </td>
      <td>
      <div class="collapse show collapse0">
        <small><?php echo $thisw_rate4;?>%</h5></small>
      </div>
      </td>
    </tr>

    <tr>
      <td>
      <div class="collapse show collapse0">
        <small>漢字＿カレンダー</small>
      </div>
      </td>
      <td>
      <div class="collapse show collapse0">
        <small><?php echo $thisw_test5;?></h5></small>
      </div>
      </td>
      <td>
      <div class="collapse show collapse0">
        <small><?php echo $thisw_correct5;?></h5></small>
      </div>
      </td>
      <td>
      <div class="collapse show collapse0">
        <small><?php echo $thisw_rate5;?>%</h5></small>
      </div>
      </td>
    </tr>

    <tr>
      <td>
      <div class="collapse show collapse0">
        <small>漢字＿家族</small>
      </div>
      </td>
      <td>
      <div class="collapse show collapse0">
        <small><?php echo $thisw_test6;?></h5></small>
      </div>
      </td>
      <td>
      <div class="collapse show collapse0">
        <small><?php echo $thisw_correct6;?></h5></small>
      </div>
      </td>
      <td>
      <div class="collapse show collapse0">
        <small><?php echo $thisw_rate6;?>%</h5></small>
      </div>
      </td>
    </tr>
 </tbody>

</table>

<a class="btn btn-success btn-lg btn-block mt5 mb-5"  href="user_top.php" role="button">TOPへ もどる</a>
<a class="btn btn-danger btn-lg btn-block mt5 mb-5"  href="logout.php" role="button">ログアウト</a>


<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>

</body>
</html>

#Bootstrapへのこだわりはありません。どんな方法でも結構なので、アドバイスよろしくお願いいたします！

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは。

html
1<div class="collapse show collapse0">

↑ではなくて↓にしてみてはいかがですか？

html
1<tr class="collapse show collapse0">

投稿2021/01/20 07:02

Lhankor_Mhy

総合スコア36960

cambodia

2021/01/20 08:07

Lhankor_Mhyさんありがとうございました！できました！答えを聞くと、なるほどと思いますが、初心者にはこれがなかなか出てこないです。本当にありがとうございました！

cambodia

2021/01/20 08:27

ちなみに、最初は閉じている　という状態にはできませんでしょうか？今は、ページを更新した時に、開いた状態になります

Lhankor_Mhy

2021/01/20 08:38

.show を取ればいいです。一度、きちんとドキュメントを読んだ方がいいかもしれませんね。 https://getbootstrap.jp/docs/4.2/components/collapse/#example

cambodia

2021/01/20 08:46

ありがとうございます。これまで、ドキュメントを読むことをせずに、他の方のブログなどを見ながら真似てやっておりました。ドキュメントの言い回しがどうもわかりづらくて。しかし、それではダメですね。ドキュメントを読むクセをつけるようにします！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

Bootstrap テーブルのcollapse開閉がうまくできない

関連した質問