Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 2ffaac4

Browse files
louismaximepitonjulien-deramond
louismaximepiton
and
julien-deramond
committedNov 10, 2023
Dark mode: Tables (#2349)
Co-authored-by: Julien Déramond <julien.deramond@orange.com>
1 parent b435215 commit 2ffaac4

File tree

4 files changed

+396
-9
lines changed

4 files changed

+396
-9
lines changed
 

‎scss/_root.scss

+8
Original file line numberDiff line numberDiff line change
@@ -150,6 +150,10 @@
150150
--#{$prefix}icon-filter: none;
151151
--#{$prefix}select-indicator: #{$form-select-indicator};
152152
--#{$prefix}select-disabled-indicator: #{$form-select-disabled-indicator};
153+
--#{$prefix}table-striped-bg-factor: #{$table-striped-bg-factor};
154+
--#{$prefix}table-striped-hover-bg-factor: #{$table-striped-hover-bg-factor};
155+
--#{$prefix}table-hover-bg-factor: #{$table-hover-bg-factor};
156+
--#{$prefix}table-active-bg-factor: #{$table-active-bg-factor};
153157
// ******* End additions for dark-mode
154158
}
155159

@@ -238,6 +242,10 @@
238242
--#{$prefix}icon-filter: #{$invert-filter};
239243
--#{$prefix}select-indicator: #{$form-select-indicator-dark};
240244
--#{$prefix}select-disabled-indicator: #{$form-select-disabled-indicator-dark};
245+
--#{$prefix}table-striped-bg-factor: .135; // .2 if solid bg
246+
--#{$prefix}table-striped-hover-bg-factor: .855; // .865 if solid bg
247+
--#{$prefix}table-hover-bg-factor: .135; // .2 if solid bg
248+
--#{$prefix}table-active-bg-factor: .565; // .6 if solid bg
241249
// ******* End additions for dark-mode
242250
// scss-docs-end root-dark-mode-vars
243251
}

‎scss/_variables.scss

+6-6
Original file line numberDiff line numberDiff line change
@@ -888,21 +888,21 @@ $table-th-font-weight: null !default;
888888

889889
$table-striped-color: $table-color !default;
890890
$table-striped-bg-factor: .065 !default; // Boosted mod
891-
$table-striped-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-striped-bg-factor) !default;
892-
$table-striped-hover-color: $table-color !default; // Boosted mod
891+
$table-striped-bg: rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}table-striped-bg-factor)) !default; // Boosted mod: instead of `rgba(var(--#{$prefix}emphasis-color-rgb), $table-striped-bg-factor)`
892+
$table-striped-hover-color: var(--#{$prefix}black) !default; // Boosted mod
893893
$table-striped-hover-bg-factor: .4 !default; // Boosted mod
894-
$table-striped-hover-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-striped-hover-bg-factor) !default; // Boosted mod
894+
$table-striped-hover-bg: rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}table-striped-hover-bg-factor)) !default; // Boosted mod
895895
$table-variant-striped-bg-factor: .2 !default; // Boosted mod
896896
$table-variant-striped-hover-bg-factor: .865 !default; // Boosted mod
897897

898-
$table-active-color: $table-color !default;
898+
$table-active-color: var(--#{$prefix}black) !default; // Boosted mod: instead of `$table-color`
899899
$table-active-bg-factor: .135 !default; // Boosted mod
900-
$table-active-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-active-bg-factor) !default;
900+
$table-active-bg: rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}table-active-bg-factor)) !default; // Boosted mod: instead of `rgba(var(--#{$prefix}emphasis-color-rgb), $table-active-bg-factor)`
901901
$table-variant-active-bg-factor: .6 !default; // Boosted mod
902902

903903
$table-hover-color: $table-color !default;
904904
$table-hover-bg-factor: .065 !default; // Boosted mod
905-
$table-hover-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-hover-bg-factor) !default;
905+
$table-hover-bg: rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}table-hover-bg-factor)) !default; // Boosted mod: instead of `rgba(var(--#{$prefix}emphasis-color-rgb), $table-hover-bg-factor)`
906906
$table-variant-hover-bg-factor: .2 !default; // Boosted mod
907907

908908
$table-border-factor: .4 !default; // Boosted mod

‎site/content/docs/5.3/content/tables.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -914,7 +914,7 @@ Use SVG or PNG to display icons or thumbnails in your compact table data cell el
914914
</div>
915915
</td>
916916
<td>
917-
<img src="/docs/{{< param docs_version >}}/assets/img/thumbnail.png" alt="Thumbnail" width="30" height="30" class="me-2">
917+
<img style="filter: var(--bs-icon-filter)" src="/docs/{{< param docs_version >}}/assets/img/thumbnail.png" alt="Thumbnail" width="30" height="30" class="me-2">
918918
Cell text
919919
</td>
920920
<td>Cell text</td>
@@ -951,7 +951,7 @@ Use SVG or PNG to display icons or thumbnails in your compact table data cell el
951951
</div>
952952
</td>
953953
<td>
954-
<img src="/docs/{{< param docs_version >}}/assets/img/thumbnail.png" alt="Thumbnail" width="30" height="30" class="me-2">
954+
<img style="filter: var(--bs-icon-filter)" src="/docs/{{< param docs_version >}}/assets/img/thumbnail.png" alt="Thumbnail" width="30" height="30" class="me-2">
955955
Cell text
956956
</td>
957957
<td>Cell text</td>
@@ -1068,7 +1068,7 @@ Use SVG or PNG to display icons or thumbnails in your compact table data cell el
10681068
<table class="table table-sm table-hover align-middle has-checkbox">
10691069
...
10701070
<td>
1071-
<img src="/docs/{{< param docs_version >}}/assets/img/thumbnail.png" alt="Thumbnail" width="30" height="30" class="me-2">
1071+
<img style="filter: var(--bs-icon-filter)" src="/docs/{{< param docs_version >}}/assets/img/thumbnail.png" alt="Thumbnail" width="30" height="30" class="me-2">
10721072
Cell text
10731073
</td>
10741074
...

‎site/content/docs/5.3/dark-mode.md

+379
Original file line numberDiff line numberDiff line change
@@ -4504,6 +4504,385 @@ sitemap_exclude: true
45044504
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-title="Tooltip title" data-bs-theme="light">Click to toggle tooltip</button>
45054505
</div>
45064506

4507+
## Contents
4508+
4509+
### Tables
4510+
4511+
<h4 class="mt-3">No theme</h4>
4512+
4513+
<div class="border border-tertiary p-3">
4514+
<table class="table table-hover mb-5">
4515+
<caption>Boosted tables basic and hover look</caption>
4516+
<thead>
4517+
<tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
4518+
</thead>
4519+
<tbody>
4520+
<tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
4521+
<tr><th scope="row">2</th><td>Active</td><td class="table-active">Cell</td><td>@activeCell</td></tr>
4522+
<tr><th scope="row">3</th><td colspan="2">Random</td><td>@random</td></tr>
4523+
<tr><th scope="row">4</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
4524+
<tr><th scope="row">5</th><td>Ring of</td><td>Kerry</td><td>@ireland</td></tr>
4525+
</tbody>
4526+
</table>
4527+
<table class="table table-striped table-hover caption-bottom mb-5">
4528+
<caption>Boosted tables striped and hover look</caption>
4529+
<thead>
4530+
<tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
4531+
</thead>
4532+
<tbody>
4533+
<tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
4534+
<tr><th scope="row">2</th><td>Active</td><td class="table-active">Cell</td><td>@activeCell</td></tr>
4535+
<tr><th scope="row">3</th><td colspan="2">Random</td><td>@random</td></tr>
4536+
<tr><th scope="row">4</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
4537+
<tr><th scope="row">5</th><td>Ring of</td><td>Kerry</td><td>@ireland</td></tr>
4538+
</tbody>
4539+
</table>
4540+
<table class="table table-striped table-hover">
4541+
<caption>Boosted tables when nested</caption>
4542+
<thead>
4543+
<tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
4544+
</thead>
4545+
<tbody>
4546+
<tr class="table-active"><td colspan="4">
4547+
<table class="table table-hover mb-0">
4548+
<caption>Boosted nested table in active row</caption>
4549+
<thead>
4550+
<tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
4551+
</thead>
4552+
<tbody>
4553+
<tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
4554+
<tr><th scope="row">2</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
4555+
</tbody>
4556+
</table>
4557+
</td></tr>
4558+
<tr><td colspan="4">
4559+
<table class="table table-hover mb-0">
4560+
<caption>Boosted nested table in striped row</caption>
4561+
<thead>
4562+
<tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
4563+
</thead>
4564+
<tbody>
4565+
<tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
4566+
<tr><th scope="row">2</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
4567+
</tbody>
4568+
</table>
4569+
</td></tr>
4570+
<tr><td colspan="4">
4571+
<table class="table table-hover mb-0">
4572+
<caption>Boosted nested table in striped row</caption>
4573+
<thead>
4574+
<tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
4575+
</thead>
4576+
<tbody>
4577+
<tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
4578+
<tr><th scope="row">2</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
4579+
</tbody>
4580+
</table>
4581+
</td></tr>
4582+
</tbody>
4583+
</table>
4584+
</div>
4585+
4586+
<h4 class="mt-3">Dark theme on container</h4>
4587+
4588+
<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
4589+
<table class="table table-hover mb-5">
4590+
<caption>Boosted tables basic and hover look</caption>
4591+
<thead>
4592+
<tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
4593+
</thead>
4594+
<tbody>
4595+
<tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
4596+
<tr><th scope="row">2</th><td>Active</td><td class="table-active">Cell</td><td>@activeCell</td></tr>
4597+
<tr><th scope="row">3</th><td colspan="2">Random</td><td>@random</td></tr>
4598+
<tr><th scope="row">4</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
4599+
<tr><th scope="row">5</th><td>Ring of</td><td>Kerry</td><td>@ireland</td></tr>
4600+
</tbody>
4601+
</table>
4602+
<table class="table table-striped table-hover caption-bottom mb-5">
4603+
<caption>Boosted tables striped and hover look</caption>
4604+
<thead>
4605+
<tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
4606+
</thead>
4607+
<tbody>
4608+
<tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
4609+
<tr><th scope="row">2</th><td>Active</td><td class="table-active">Cell</td><td>@activeCell</td></tr>
4610+
<tr><th scope="row">3</th><td colspan="2">Random</td><td>@random</td></tr>
4611+
<tr><th scope="row">4</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
4612+
<tr><th scope="row">5</th><td>Ring of</td><td>Kerry</td><td>@ireland</td></tr>
4613+
</tbody>
4614+
</table>
4615+
<table class="table table-striped table-hover">
4616+
<caption>Boosted tables when nested</caption>
4617+
<thead>
4618+
<tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
4619+
</thead>
4620+
<tbody>
4621+
<tr class="table-active"><td colspan="4">
4622+
<table class="table table-hover mb-0">
4623+
<caption>Boosted nested table in active row</caption>
4624+
<thead>
4625+
<tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
4626+
</thead>
4627+
<tbody>
4628+
<tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
4629+
<tr><th scope="row">2</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
4630+
</tbody>
4631+
</table>
4632+
</td></tr>
4633+
<tr><td colspan="4">
4634+
<table class="table table-hover mb-0">
4635+
<caption>Boosted nested table in striped row</caption>
4636+
<thead>
4637+
<tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
4638+
</thead>
4639+
<tbody>
4640+
<tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
4641+
<tr><th scope="row">2</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
4642+
</tbody>
4643+
</table>
4644+
</td></tr>
4645+
<tr><td colspan="4">
4646+
<table class="table table-hover mb-0">
4647+
<caption>Boosted nested table in striped row</caption>
4648+
<thead>
4649+
<tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
4650+
</thead>
4651+
<tbody>
4652+
<tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
4653+
<tr><th scope="row">2</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
4654+
</tbody>
4655+
</table>
4656+
</td></tr>
4657+
</tbody>
4658+
</table>
4659+
</div>
4660+
4661+
<h4 class="mt-3">Light theme on container</h4>
4662+
4663+
<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
4664+
<table class="table table-hover mb-5">
4665+
<caption>Boosted tables basic and hover look</caption>
4666+
<thead>
4667+
<tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
4668+
</thead>
4669+
<tbody>
4670+
<tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
4671+
<tr><th scope="row">2</th><td>Active</td><td class="table-active">Cell</td><td>@activeCell</td></tr>
4672+
<tr><th scope="row">3</th><td colspan="2">Random</td><td>@random</td></tr>
4673+
<tr><th scope="row">4</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
4674+
<tr><th scope="row">5</th><td>Ring of</td><td>Kerry</td><td>@ireland</td></tr>
4675+
</tbody>
4676+
</table>
4677+
<table class="table table-striped table-hover caption-bottom mb-5">
4678+
<caption>Boosted tables striped and hover look</caption>
4679+
<thead>
4680+
<tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
4681+
</thead>
4682+
<tbody>
4683+
<tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
4684+
<tr><th scope="row">2</th><td>Active</td><td class="table-active">Cell</td><td>@activeCell</td></tr>
4685+
<tr><th scope="row">3</th><td colspan="2">Random</td><td>@random</td></tr>
4686+
<tr><th scope="row">4</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
4687+
<tr><th scope="row">5</th><td>Ring of</td><td>Kerry</td><td>@ireland</td></tr>
4688+
</tbody>
4689+
</table>
4690+
<table class="table table-striped table-hover">
4691+
<caption>Boosted tables when nested</caption>
4692+
<thead>
4693+
<tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
4694+
</thead>
4695+
<tbody>
4696+
<tr class="table-active"><td colspan="4">
4697+
<table class="table table-hover mb-0">
4698+
<caption>Boosted nested table in active row</caption>
4699+
<thead>
4700+
<tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
4701+
</thead>
4702+
<tbody>
4703+
<tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
4704+
<tr><th scope="row">2</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
4705+
</tbody>
4706+
</table>
4707+
</td></tr>
4708+
<tr><td colspan="4">
4709+
<table class="table table-hover mb-0">
4710+
<caption>Boosted nested table in striped row</caption>
4711+
<thead>
4712+
<tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
4713+
</thead>
4714+
<tbody>
4715+
<tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
4716+
<tr><th scope="row">2</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
4717+
</tbody>
4718+
</table>
4719+
</td></tr>
4720+
<tr><td colspan="4">
4721+
<table class="table table-hover mb-0">
4722+
<caption>Boosted nested table in striped row</caption>
4723+
<thead>
4724+
<tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
4725+
</thead>
4726+
<tbody>
4727+
<tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
4728+
<tr><th scope="row">2</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
4729+
</tbody>
4730+
</table>
4731+
</td></tr>
4732+
</tbody>
4733+
</table>
4734+
</div>
4735+
4736+
<h4 class="mt-3">Dark theme on component</h4>
4737+
4738+
<div class="border border-tertiary p-3" style="background-color: #282d55;">
4739+
<table class="table table-hover mb-5" data-bs-theme="dark">
4740+
<caption>Boosted tables basic and hover look</caption>
4741+
<thead>
4742+
<tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
4743+
</thead>
4744+
<tbody>
4745+
<tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
4746+
<tr><th scope="row">2</th><td>Active</td><td class="table-active">Cell</td><td>@activeCell</td></tr>
4747+
<tr><th scope="row">3</th><td colspan="2">Random</td><td>@random</td></tr>
4748+
<tr><th scope="row">4</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
4749+
<tr><th scope="row">5</th><td>Ring of</td><td>Kerry</td><td>@ireland</td></tr>
4750+
</tbody>
4751+
</table>
4752+
<table class="table table-striped table-hover caption-bottom mb-5" data-bs-theme="dark">
4753+
<caption>Boosted tables striped and hover look</caption>
4754+
<thead>
4755+
<tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
4756+
</thead>
4757+
<tbody>
4758+
<tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
4759+
<tr><th scope="row">2</th><td>Active</td><td class="table-active">Cell</td><td>@activeCell</td></tr>
4760+
<tr><th scope="row">3</th><td colspan="2">Random</td><td>@random</td></tr>
4761+
<tr><th scope="row">4</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
4762+
<tr><th scope="row">5</th><td>Ring of</td><td>Kerry</td><td>@ireland</td></tr>
4763+
</tbody>
4764+
</table>
4765+
<table class="table table-striped table-hover" data-bs-theme="dark">
4766+
<caption>Boosted tables when nested</caption>
4767+
<thead>
4768+
<tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
4769+
</thead>
4770+
<tbody>
4771+
<tr class="table-active"><td colspan="4">
4772+
<table class="table table-hover mb-0">
4773+
<caption>Boosted nested table in active row</caption>
4774+
<thead>
4775+
<tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
4776+
</thead>
4777+
<tbody>
4778+
<tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
4779+
<tr><th scope="row">2</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
4780+
</tbody>
4781+
</table>
4782+
</td></tr>
4783+
<tr><td colspan="4">
4784+
<table class="table table-hover mb-0">
4785+
<caption>Boosted nested table in striped row</caption>
4786+
<thead>
4787+
<tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
4788+
</thead>
4789+
<tbody>
4790+
<tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
4791+
<tr><th scope="row">2</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
4792+
</tbody>
4793+
</table>
4794+
</td></tr>
4795+
<tr><td colspan="4">
4796+
<table class="table table-hover mb-0">
4797+
<caption>Boosted nested table in striped row</caption>
4798+
<thead>
4799+
<tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
4800+
</thead>
4801+
<tbody>
4802+
<tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
4803+
<tr><th scope="row">2</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
4804+
</tbody>
4805+
</table>
4806+
</td></tr>
4807+
</tbody>
4808+
</table>
4809+
</div>
4810+
4811+
<h4 class="mt-3">Light theme on component</h4>
4812+
4813+
<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
4814+
<table class="table table-hover mb-5" data-bs-theme="light">
4815+
<caption>Boosted tables basic and hover look</caption>
4816+
<thead>
4817+
<tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
4818+
</thead>
4819+
<tbody>
4820+
<tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
4821+
<tr><th scope="row">2</th><td>Active</td><td class="table-active">Cell</td><td>@activeCell</td></tr>
4822+
<tr><th scope="row">3</th><td colspan="2">Random</td><td>@random</td></tr>
4823+
<tr><th scope="row">4</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
4824+
<tr><th scope="row">5</th><td>Ring of</td><td>Kerry</td><td>@ireland</td></tr>
4825+
</tbody>
4826+
</table>
4827+
<table class="table table-striped table-hover caption-bottom mb-5" data-bs-theme="light">
4828+
<caption>Boosted tables striped and hover look</caption>
4829+
<thead>
4830+
<tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
4831+
</thead>
4832+
<tbody>
4833+
<tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
4834+
<tr><th scope="row">2</th><td>Active</td><td class="table-active">Cell</td><td>@activeCell</td></tr>
4835+
<tr><th scope="row">3</th><td colspan="2">Random</td><td>@random</td></tr>
4836+
<tr><th scope="row">4</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
4837+
<tr><th scope="row">5</th><td>Ring of</td><td>Kerry</td><td>@ireland</td></tr>
4838+
</tbody>
4839+
</table>
4840+
<table class="table table-striped table-hover" data-bs-theme="light">
4841+
<caption>Boosted tables when nested</caption>
4842+
<thead>
4843+
<tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
4844+
</thead>
4845+
<tbody>
4846+
<tr class="table-active"><td colspan="4">
4847+
<table class="table table-hover mb-0">
4848+
<caption>Boosted nested table in active row</caption>
4849+
<thead>
4850+
<tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
4851+
</thead>
4852+
<tbody>
4853+
<tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
4854+
<tr><th scope="row">2</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
4855+
</tbody>
4856+
</table>
4857+
</td></tr>
4858+
<tr><td colspan="4">
4859+
<table class="table table-hover mb-0">
4860+
<caption>Boosted nested table in striped row</caption>
4861+
<thead>
4862+
<tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
4863+
</thead>
4864+
<tbody>
4865+
<tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
4866+
<tr><th scope="row">2</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
4867+
</tbody>
4868+
</table>
4869+
</td></tr>
4870+
<tr><td colspan="4">
4871+
<table class="table table-hover mb-0">
4872+
<caption>Boosted nested table in striped row</caption>
4873+
<thead>
4874+
<tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
4875+
</thead>
4876+
<tbody>
4877+
<tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
4878+
<tr><th scope="row">2</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
4879+
</tbody>
4880+
</table>
4881+
</td></tr>
4882+
</tbody>
4883+
</table>
4884+
</div>
4885+
45074886
## Forms
45084887

45094888
### Color

0 commit comments

Comments
 (0)
Please sign in to comment.