I want to make it into a form with ‘collapse’ in the ‘table’ using bootstrap.
For some reason, the code made by someone else is not applied to me, so I’m making it myself.
However, it creates “collapse” in the form of going up outside the “table”.(Reference photo)
I want to make it like the picture below.
I hope there is a collapse in “table”.
I would appreciate it if you could tell me what the problem is.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<table class="table table-hover">
<thead>
<tr>
<th scope="col" class="font2">No</th>
<th scope="col" class="font2">Name</th>
<th scope="col" class="font2">Year</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" class="font3">1</th>
<td class="font3" data-bs-toggle="collapse" href="#collapseExample1" role="button" aria-expanded="false" aria-controls="collapseExample">A</td>
<td class="font3">2019</td>
<div class="collapse" id="collapseExample1">
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</tr>
<tr>
<th scope="row" class="font3">2</th>
<td class="font3" data-bs-toggle="collapse" href="#collapseExample2" role="button" aria-expanded="false" aria-controls="collapseExample2">tq</td>
<td class="font3">Thornton</td>
<div class="collapse" id="collapseExample2">
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</tr>
<tr>
<th scope="row" class="font3">3</th>
<td colspan="2" class="font3" data-bs-toggle="collapse" href="#collapseExample3" role="button" aria-expanded="false" aria-controls="collapseExample3">unspecified Recode</td>
<div class="collapse" id="collapseExample3">
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</tr>
</tbody>
</table>
|
cs |
