@themesberg/pixel-lite-bootstrap-ui-kit
Version:
Open-source Bootstrap 5 UI Kit
171 lines • 9.79 kB
HTML
<!-- End of Hero -->
<div class="section section-md">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-12">
<div class="mb-4">
<span class="h5">Default table</span>
</div>
<div class="mb-5">
<table class="table">
<tr>
<th scope="col" id="class">Class</th>
<th scope="col" id="teacher">Teacher</th>
<th scope="col" id="males">Males</th>
<th scope="col" id="females">Females</th>
</tr>
<tr>
<th scope="row" id="firstyear" rowspan="2">First Year</th>
<th scope="row" id="Bolter" headers="firstyear teacher">D. Bolter</th>
<td headers="firstyear Bolter males">5</td>
<td headers="firstyear Bolter females">4</td>
</tr>
<tr>
<th scope="row" id="Cheetham" headers="firstyear teacher">A. Cheetham</th>
<td headers="firstyear Cheetham males">7</td>
<td headers="firstyear Cheetham females">9</td>
</tr>
<tr>
<th scope="row" id="secondyear" rowspan="3">Second Year</th>
<th scope="row" id="Lam" headers="secondyear teacher">M. Lam</th>
<td headers="secondyear Lam males">3</td>
<td headers="secondyear Lam females">9</td>
</tr>
<tr>
<th scope="row" id="Crossy" headers="secondyear teacher">S. Crossy</th>
<td headers="secondyear Crossy males">4</td>
<td headers="secondyear Crossy females">3</td>
</tr>
<tr>
<th scope="row" id="Forsyth" headers="secondyear teacher">A. Forsyth</th>
<td headers="secondyear Forsyth males">6</td>
<td headers="secondyear Forsyth females">9</td>
</tr>
</table>
</div>
<div class="mb-5">
<div class="mb-4">
<span class="h5">Dark table</span>
</div>
<table class="table table-dark">
<tr>
<th scope="col" id="class1">Year</th>
<th scope="col" id="teacher1">Teacher</th>
<th scope="col" id="males1">Males</th>
<th scope="col" id="females1">Females</th>
</tr>
<tr>
<th scope="row" id="firstyear1" rowspan="2">First Year</th>
<th scope="row" id="Bolter1" headers="firstyear1 teacher1">D. Bolter</th>
<td headers="firstyear1 Bolter1 males1">5</td>
<td headers="firstyear1 Bolter1 females1">4</td>
</tr>
<tr>
<th scope="row" id="Cheetham1" headers="firstyear1 teacher1">A. Cheetham</th>
<td headers="firstyear1 Cheetham1 males1">7</td>
<td headers="firstyear1 Cheetham1 females1">9</td>
</tr>
<tr>
<th scope="row" id="secondyear1" rowspan="3">Second Year</th>
<th scope="row" id="Lam1" headers="secondyear1 teacher1">M. Lam</th>
<td headers="secondyear1 Lam1 males1">3</td>
<td headers="secondyear1 Lam1 females1">9</td>
</tr>
<tr>
<th scope="row" id="Crossy1" headers="secondyear1 teacher1">S. Crossy</th>
<td headers="secondyear1 Crossy1 males1">4</td>
<td headers="secondyear1 Crossy1 females1">3</td>
</tr>
<tr>
<th scope="row" id="Forsyth1" headers="secondyear1 teacher1">A. Forsyth</th>
<td headers="secondyear1 Forsyth1 males1">6</td>
<td headers="secondyear1 Forsyth1 females1">9</td>
</tr>
</table>
</div>
<div class="mb-5">
<div class="mb-4">
<span class="h5">Hoverable rows</span>
</div>
<table class="table table-hover">
<tr>
<th scope="col" id="class3">Class</th>
<th scope="col" id="teacher3">Teacher</th>
<th scope="col" id="males3">Males</th>
<th scope="col" id="females3">Females</th>
</tr>
<tr>
<th scope="row" id="firstyear3" rowspan="2">First Year</th>
<th scope="row" id="Bolter3" headers="firstyear3 teacher3">D. Bolter</th>
<td headers="firstyear3 Bolter3 males3">5</td>
<td headers="firstyear3 Bolter3 females3">4</td>
</tr>
<tr>
<th scope="row" id="Cheetham3" headers="firstyear3 teacher3">A. Cheetham</th>
<td headers="firstyear3 Cheetham3 males3">7</td>
<td headers="firstyear3 Cheetham3 females3">9</td>
</tr>
<tr>
<th scope="row" id="secondyear3" rowspan="3">Second Year</th>
<th scope="row" id="Lam3" headers="secondyear3 teacher3">M. Lam</th>
<td headers="secondyear3 Lam3 males3">3</td>
<td headers="secondyear3 Lam3 females3">9</td>
</tr>
<tr>
<th scope="row" id="Crossy3" headers="secondyear3 teacher3">S. Crossy</th>
<td headers="secondyear3 Crossy3 males3">4</td>
<td headers="secondyear3 Crossy3 females3">3</td>
</tr>
<tr>
<th scope="row" id="Forsyth3" headers="secondyear3 teacher3">A. Forsyth</th>
<td headers="secondyear3 Forsyth3 males3">6</td>
<td headers="secondyear3 Forsyth3 females3">9</td>
</tr>
</table>
</div>
<div class="mb-5">
<div class="mb-4">
<span class="h5">Responsive Table</span>
</div>
<div class="table-responsive-sm">
<table class="table table-striped">
<tr>
<th scope="col" id="class2">Class</th>
<th scope="col" id="teacher2">Teacher</th>
<th scope="col" id="males2">Males</th>
<th scope="col" id="females2">Females</th>
</tr>
<tr>
<th scope="row" id="firstyear2" rowspan="2">First Year</th>
<th scope="row" id="Bolter2" headers="firstyear2 teacher2">D. Bolter</th>
<td headers="firstyear2 Bolter2 males2">5</td>
<td headers="firstyear2 Bolter2 females2">4</td>
</tr>
<tr>
<th scope="row" id="Cheetham2" headers="firstyear2 teacher2">A. Cheetham</th>
<td headers="firstyear2 Cheetham2 males2">7</td>
<td headers="firstyear2 Cheetham2 females2">9</td>
</tr>
<tr>
<th scope="row" id="secondyear2" rowspan="3">Second Year</th>
<th scope="row" id="Lam2" headers="secondyear2 teacher2">M. Lam</th>
<td headers="secondyear2 Lam2 males2">3</td>
<td headers="secondyear2 Lam2 females2">9</td>
</tr>
<tr>
<th scope="row" id="Crossy2" headers="secondyear2 teacher2">S. Crossy</th>
<td headers="secondyear2 Crossy2 males2">4</td>
<td headers="secondyear2 Crossy2 females2">3</td>
</tr>
<tr>
<th scope="row" id="Forsyth2" headers="secondyear2 teacher2">A. Forsyth</th>
<td headers="secondyear2 Forsyth2 males2">6</td>
<td headers="secondyear2 Forsyth2 females2">9</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>