-
Notifications
You must be signed in to change notification settings - Fork 0
/
table.html
94 lines (88 loc) · 4.67 KB
/
table.html
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!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.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<div class="container shadow min-vh-100 py-2">
<div class="table-responsive">
<table class="table accordion">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Heading 1</th>
<th scope="col">Heading 2</th>
<th scope="col">Heading 3</th>
<th scope="col">Heading 4</th>
</tr>
</thead>
<tbody>
<tr data-bs-toggle="collapse" data-bs-target="#r1">
<th scope="row">1 <i class="bi bi-chevron-down"></i></th>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="collapse accordion-collapse" id="r1" data-bs-parent=".table">
<td colspan="5"> Item 1 detail .. This is the first item's accordion body. It is shown by
default,
until the collapse plugin adds the appropriate classes that we use to style each element.
These
classes control the overall appearance, as well as the showing and hiding via CSS
transitions.
You can modify any of this with custom CSS or overriding our default variables. It's also
worth
noting that just about any HTML can go within the .accordion-body, though the transition
does
limit overflow. </td>
</tr>
<tr data-bs-toggle="collapse" data-bs-target="#r2">
<th scope="row">2 <i class="bi bi-chevron-down"></i></th>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="collapse accordion-collapse" id="r2" data-bs-parent=".table">
<td> Item 2 detail .. This is the first item's accordion body. It is shown by default, until the
collapse plugin adds the appropriate classes that we use to style each element. These
classes
control the overall appearance, as well as the showing and hiding via CSS transitions. You
can
modify any of this with custom CSS or overriding our default variables. It's also worth
noting
that just about any HTML can go within the .accordion-body, though the transition does limit
overflow. </td>
</tr>
<tr data-bs-toggle="collapse" data-bs-target="#r3">
<th scope="row">3 <i class="bi bi-chevron-down"></i></th>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="collapse accordion-collapse" id="r3" data-bs-parent=".table">
<td colspan="5"> Item 3 detail .. This is the first item's accordion body. It is shown by
default,
until the collapse plugin adds the appropriate classes that we use to style each element.
These
classes control the overall appearance, as well as the showing and hiding via CSS
transitions.
You can modify any of this with custom CSS or overriding our default variables. It's also
worth
noting that just about any HTML can go within the .accordion-body, though the transition
does
limit overflow. </td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>