“Tabel HTML yang dapat diperluas dan dapat dilipat” Kode Jawaban

Tabel HTML yang dapat diperluas dan dapat dilipat

<html><head><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script><style>@import url('https://fonts.googleapis.com/css?family=Assistant');
body {
background: #eee;
font-family: Assistant, sans-serif
}
.cell-1 {
border-collapse: separate;
border-spacing: 0 4em;
background: #ffffff;
border-bottom: 5px solid transparent;
background-clip: padding-box;
cursor: pointer
}
thead {
background: #dddcdc
}
.table-elipse {
cursor: pointer
}
#demo {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s 0.1s ease-in-out;
transition: all 0.3s ease-in-out
}
.row-child {
background-color: #000;
color: #fff
}</style></head><body><div class="container mt-5">
<div class="d-flex justify-content-center row">
<div class="col-md-10">
<div class="rounded">
<div class="table-responsive table-borderless">
<table class="table">
<thead>
<tr>
<th class="text-center">S. No.</th>
<th>Order #</th>
<th>Company name</th>
<th>status</th>
<th>Total</th>
<th>Created</th>
<th></th>
</tr>
</thead>
<tbody class="table-body">
<tr class="cell-1" data-toggle="collapse" data-target="#demo">
<td class="text-center">1</td>
<td>#SO-13487</td>
<td>Gasper Antunes</td>
<td><span class="badge badge-danger">Fullfilled</span></td>
<td>$2674.00</td>
<td>Today</td>
<td class="table-elipse" data-toggle="collapse" data-target="#demo"><i class="fa fa-ellipsis-h text-black-50"></i></td>
</tr>
<tr id="demo" class="collapse cell-1 row-child">
<td class="text-center" colspan="1"><i class="fa fa-angle-up"></i></td>
<td colspan="1">Product&nbsp;</td>
<td colspan="3">iphone SX with ratina display</td>
<td colspan="1">QTY</td>
<td colspan="2">2</td>
</tr>
<tr class="cell-1" data-toggle="collapse" data-target="#demo-2">
<td class="text-center">2</td>
<td>#SO-13488</td>
<td>Tinder Steel</td>
<td><span class="badge badge-success">Fullfilled</span></td>
<td>$3664.00</td>
<td>Yesterday</td>
<td class="table-elipse" data-toggle="collapse" data-target="#demo"><i class="fa fa-ellipsis-h text-black-50"></i></td>
</tr>
<tr id="demo-2" class="collapse cell-1 row-child">
<td class="text-center" colspan="1"><i class="fa fa-angle-up"></i></td>
<td colspan="1">Product&nbsp;</td>
<td colspan="3">iphone SX with ratina display</td>
<td colspan="1">QTY</td>
<td colspan="2">2</td>
</tr>
<tr class="cell-1" data-toggle="collapse" data-target="#demo-3">
<td class="text-center">3</td>
<td>#SO-13489</td>
<td>Micro Steel</td>
<td><span class="badge badge-success">Placed</span></td>
<td>$2674.00</td>
<td>March 20, 2020</td>
<td class="table-elipse" data-toggle="collapse" data-target="#demo"><i class="fa fa-ellipsis-h text-black-50"></i></td>
</tr>
<tr id="demo-3" class="collapse cell-1 row-child">
<td class="text-center" colspan="1"><i class="fa fa-angle-up"></i></td>
<td colspan="1">Product&nbsp;</td>
<td colspan="3">iphone SX with ratina display</td>
<td colspan="1">QTY</td>
<td colspan="2">2</td>
</tr>
<tr class="cell-1" data-toggle="collapse" data-target="#demo-4">
<td class="text-center">4</td>
<td>#SO-13490</td>
<td>B Mobiles</td>
<td><span class="badge badge-success">Delivered</span></td>
<td>$4674.00</td>
<td>March 22, 2020</td>
<td class="table-elipse" data-toggle="collapse" data-target="#demo"><i class="fa fa-ellipsis-h text-black-50"></i></td>
</tr>
<tr id="demo-4" class="collapse cell-1 row-child">
<td class="text-center" colspan="1"><i class="fa fa-angle-up"></i></td>
<td colspan="1">Product&nbsp;</td>
<td colspan="3">iphone SX with ratina display</td>
<td colspan="1">QTY</td>
<td colspan="2">2</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div> <script type="text/javascript"></script></body></html>
adens

html baris runtuh meja

By default, the text in <th> elements are bold and centered, but you can change that with CSS.
Rick Astley

Jawaban yang mirip dengan “Tabel HTML yang dapat diperluas dan dapat dilipat”

Pertanyaan yang mirip dengan “Tabel HTML yang dapat diperluas dan dapat dilipat”

Lebih banyak jawaban terkait untuk “Tabel HTML yang dapat diperluas dan dapat dilipat” di HTML

Jelajahi jawaban kode populer menurut bahasa

Jelajahi bahasa kode lainnya