@tabler/core 1.1.1 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/dist/css/tabler-flags.css +2 -2
- package/dist/css/tabler-flags.css.map +1 -1
- package/dist/css/tabler-flags.min.css +2 -2
- package/dist/css/tabler-flags.min.css.map +1 -1
- package/dist/css/tabler-flags.rtl.css +2 -2
- package/dist/css/tabler-flags.rtl.css.map +1 -1
- package/dist/css/tabler-flags.rtl.min.css +2 -2
- package/dist/css/tabler-flags.rtl.min.css.map +1 -1
- package/dist/css/tabler-marketing.css +6 -6
- package/dist/css/tabler-marketing.css.map +1 -1
- package/dist/css/tabler-marketing.min.css +2 -2
- package/dist/css/tabler-marketing.min.css.map +1 -1
- package/dist/css/tabler-marketing.rtl.css +6 -6
- package/dist/css/tabler-marketing.rtl.css.map +1 -1
- package/dist/css/tabler-marketing.rtl.min.css +2 -2
- package/dist/css/tabler-marketing.rtl.min.css.map +1 -1
- package/dist/css/tabler-payments.css +1 -1
- package/dist/css/tabler-payments.min.css +1 -1
- package/dist/css/tabler-payments.rtl.css +1 -1
- package/dist/css/tabler-payments.rtl.min.css +1 -1
- package/dist/css/tabler-props.css +448 -0
- package/dist/css/tabler-props.css.map +1 -0
- package/dist/css/tabler-props.min.css +8 -0
- package/dist/css/tabler-props.min.css.map +1 -0
- package/dist/css/tabler-props.rtl.css +447 -0
- package/dist/css/tabler-props.rtl.css.map +1 -0
- package/dist/css/tabler-props.rtl.min.css +8 -0
- package/dist/css/tabler-props.rtl.min.css.map +1 -0
- package/dist/css/tabler-socials.css +1 -1
- package/dist/css/tabler-socials.min.css +1 -1
- package/dist/css/tabler-socials.rtl.css +1 -1
- package/dist/css/tabler-socials.rtl.min.css +1 -1
- package/dist/css/tabler-themes.css +213 -0
- package/dist/css/tabler-themes.css.map +1 -0
- package/dist/css/tabler-themes.min.css +8 -0
- package/dist/css/tabler-themes.min.css.map +1 -0
- package/dist/css/tabler-themes.rtl.css +212 -0
- package/dist/css/tabler-themes.rtl.css.map +1 -0
- package/dist/css/tabler-themes.rtl.min.css +8 -0
- package/dist/css/tabler-themes.rtl.min.css.map +1 -0
- package/dist/css/tabler-vendors.css +31 -16
- package/dist/css/tabler-vendors.css.map +1 -1
- package/dist/css/tabler-vendors.min.css +2 -2
- package/dist/css/tabler-vendors.min.css.map +1 -1
- package/dist/css/tabler-vendors.rtl.css +31 -16
- package/dist/css/tabler-vendors.rtl.css.map +1 -1
- package/dist/css/tabler-vendors.rtl.min.css +2 -2
- package/dist/css/tabler-vendors.rtl.min.css.map +1 -1
- package/dist/css/tabler.css +7662 -8392
- package/dist/css/tabler.css.map +1 -1
- package/dist/css/tabler.min.css +2 -2
- package/dist/css/tabler.min.css.map +1 -1
- package/dist/css/tabler.rtl.css +7751 -8481
- package/dist/css/tabler.rtl.css.map +1 -1
- package/dist/css/tabler.rtl.min.css +2 -2
- package/dist/css/tabler.rtl.min.css.map +1 -1
- package/dist/img/flags/kr.svg +1 -1
- package/dist/js/tabler-theme.esm.js +38 -0
- package/dist/js/tabler-theme.esm.js.map +1 -0
- package/dist/js/tabler-theme.esm.min.js +8 -0
- package/dist/js/tabler-theme.esm.min.js.map +1 -0
- package/dist/js/tabler-theme.js +45 -0
- package/dist/js/tabler-theme.js.map +1 -0
- package/dist/js/tabler-theme.min.js +8 -0
- package/dist/js/tabler-theme.min.js.map +1 -0
- package/dist/js/tabler.esm.js +28 -21
- package/dist/js/tabler.esm.js.map +1 -1
- package/dist/js/tabler.esm.min.js +5 -5
- package/dist/js/tabler.esm.min.js.map +1 -1
- package/dist/js/tabler.js +36 -24
- package/dist/js/tabler.js.map +1 -1
- package/dist/js/tabler.min.js +5 -5
- package/dist/js/tabler.min.js.map +1 -1
- package/js/src/autosize.js +1 -4
- package/js/src/input-mask.js +1 -3
- package/js/tabler-theme.js +35 -0
- package/js/{tabler.esm.js → tabler.js} +16 -0
- package/package.json +10 -8
- package/scss/_bootstrap-components.scss +0 -5
- package/scss/_core.scss +4 -0
- package/scss/_props.scss +91 -0
- package/scss/_utilities.scss +30 -1
- package/scss/_variables-dark.scss +1 -1
- package/scss/_variables.scss +79 -60
- package/scss/helpers/_index.scss +143 -0
- package/scss/layout/_core.scss +1 -0
- package/scss/layout/_dark.scss +33 -38
- package/scss/layout/_navbar.scss +2 -1
- package/scss/layout/_page.scss +1 -0
- package/scss/layout/_root.scss +26 -34
- package/scss/marketing/_core.scss +1 -1
- package/scss/marketing/_pricing.scss +1 -1
- package/scss/mixins/_mixins.scss +6 -6
- package/scss/tabler-props.scss +1 -0
- package/scss/tabler-themes.scss +121 -0
- package/scss/tabler-vendors.scss +3 -1
- package/scss/tabler.scss +0 -1
- package/scss/ui/_accordion.scss +31 -26
- package/scss/ui/_alerts.scss +19 -8
- package/scss/ui/_avatars.scss +35 -9
- package/scss/ui/_badges.scss +1 -1
- package/scss/ui/_buttons.scss +15 -17
- package/scss/ui/_close.scss +55 -2
- package/scss/ui/_dropdowns.scss +1 -0
- package/scss/ui/_forms.scss +12 -2
- package/scss/ui/_markdown.scss +10 -1
- package/scss/ui/_nav.scss +11 -1
- package/scss/ui/_offcanvas.scss +1 -1
- package/scss/ui/_pagination.scss +2 -0
- package/scss/ui/_signature.scss +4 -2
- package/scss/ui/_steps.scss +4 -0
- package/scss/ui/_tables.scss +16 -0
- package/scss/ui/_tags.scss +1 -1
- package/scss/ui/_type.scss +69 -7
- package/scss/ui/forms/_form-colorinput.scss +1 -1
- package/scss/ui/forms/_form-imagecheck.scss +6 -5
- package/scss/ui/forms/_form-selectgroup.scss +1 -1
- package/scss/utils/_colors.scss +58 -11
- package/scss/utils/_scroll.scss +0 -2
- package/scss/vendor/_coloris.scss +6 -1
- package/scss/vendor/_fslightbox.scss +1 -1
- package/scss/vendor/_jsvectormap.scss +2 -3
- package/scss/vendor/_litepicker.scss +1 -0
- package/scss/vendor/_nouislider.scss +0 -2
- package/scss/vendor/_tinymce.scss +3 -3
- package/scss/vendor/_tom-select.scss +7 -4
- package/scss/vendor/_turbo.scss +3 -0
- package/scss/vendor/_wysiwyg.scss +34 -0
- package/docs/emails/index.mdx +0 -14
- package/docs/emails/introduction/compiled-html.mdx +0 -29
- package/docs/emails/introduction/contents.mdx +0 -63
- package/docs/emails/introduction/index.mdx +0 -9
- package/docs/emails/introduction/source-html.mdx +0 -26
- package/docs/icons/index.mdx +0 -13
- package/docs/icons/libraries/index.mdx +0 -5
- package/docs/icons/libraries/preact.mdx +0 -42
- package/docs/icons/libraries/react.mdx +0 -42
- package/docs/icons/libraries/solidjs.mdx +0 -42
- package/docs/icons/libraries/svelte.mdx +0 -43
- package/docs/icons/libraries/vue.mdx +0 -50
- package/docs/icons/libraries/webfont.mdx +0 -60
- package/docs/icons/plugins/figma.mdx +0 -15
- package/docs/icons/plugins/index.mdx +0 -4
- package/docs/icons/static-files/eps.mdx +0 -15
- package/docs/icons/static-files/index.mdx +0 -5
- package/docs/icons/static-files/pdf.mdx +0 -15
- package/docs/icons/static-files/png.mdx +0 -31
- package/docs/icons/static-files/svg.mdx +0 -85
- package/docs/illustrations/index.mdx +0 -8
- package/docs/illustrations/introduction/contents.mdx +0 -77
- package/docs/illustrations/introduction/customization.mdx +0 -1198
- package/docs/illustrations/introduction/index.mdx +0 -5
- package/docs/illustrations/introduction/license.mdx +0 -90
- package/docs/img/browsers/brave.svg +0 -1
- package/docs/img/browsers/chrome.svg +0 -1
- package/docs/img/browsers/edge.svg +0 -1
- package/docs/img/browsers/electron.svg +0 -1
- package/docs/img/browsers/firefox.svg +0 -1
- package/docs/img/browsers/internet-explorer.svg +0 -1
- package/docs/img/browsers/opera.svg +0 -1
- package/docs/img/browsers/safari.svg +0 -1
- package/docs/img/browsers/vivaldi.svg +0 -1
- package/docs/img/cover-illustrations-dark.png +0 -0
- package/docs/img/cover-illustrations.png +0 -0
- package/docs/img/cover-tabler-dark.png +0 -0
- package/docs/img/cover-tabler.png +0 -0
- package/docs/img/icons/figma-plugin.png +0 -0
- package/docs/img/icons/package-angular-dark.png +0 -0
- package/docs/img/icons/package-angular.png +0 -0
- package/docs/img/icons/package-eps-dark.png +0 -0
- package/docs/img/icons/package-eps.png +0 -0
- package/docs/img/icons/package-js-dark.png +0 -0
- package/docs/img/icons/package-js.png +0 -0
- package/docs/img/icons/package-pdf-dark.png +0 -0
- package/docs/img/icons/package-pdf.png +0 -0
- package/docs/img/icons/package-png-dark.png +0 -0
- package/docs/img/icons/package-png.png +0 -0
- package/docs/img/icons/package-preact-dark.png +0 -0
- package/docs/img/icons/package-preact.png +0 -0
- package/docs/img/icons/package-react-dark.png +0 -0
- package/docs/img/icons/package-react-native-dark.png +0 -0
- package/docs/img/icons/package-react-native.png +0 -0
- package/docs/img/icons/package-react.png +0 -0
- package/docs/img/icons/package-solidjs-dark.png +0 -0
- package/docs/img/icons/package-solidjs.png +0 -0
- package/docs/img/icons/package-sprite-dark.png +0 -0
- package/docs/img/icons/package-sprite.png +0 -0
- package/docs/img/icons/package-svelte-dark.png +0 -0
- package/docs/img/icons/package-svelte.png +0 -0
- package/docs/img/icons/package-svg-dark.png +0 -0
- package/docs/img/icons/package-svg.png +0 -0
- package/docs/img/icons/package-vue-dark.png +0 -0
- package/docs/img/icons/package-vue.png +0 -0
- package/docs/img/icons/package-webfont-dark.png +0 -0
- package/docs/img/icons/package-webfont.png +0 -0
- package/docs/index.mdx +0 -16
- package/docs/ui/base/colors.mdx +0 -83
- package/docs/ui/base/index.mdx +0 -6
- package/docs/ui/base/typography.mdx +0 -311
- package/docs/ui/components/alerts.mdx +0 -406
- package/docs/ui/components/autosize.mdx +0 -25
- package/docs/ui/components/avatars.mdx +0 -227
- package/docs/ui/components/badges.mdx +0 -112
- package/docs/ui/components/breadcrumb.mdx +0 -199
- package/docs/ui/components/buttons.mdx +0 -1213
- package/docs/ui/components/cards.mdx +0 -417
- package/docs/ui/components/carousel.mdx +0 -459
- package/docs/ui/components/charts.mdx +0 -697
- package/docs/ui/components/countup.mdx +0 -165
- package/docs/ui/components/datagrid.mdx +0 -120
- package/docs/ui/components/divider.mdx +0 -68
- package/docs/ui/components/dropdowns.mdx +0 -302
- package/docs/ui/components/dropzone.mdx +0 -88
- package/docs/ui/components/empty.mdx +0 -149
- package/docs/ui/components/icons.mdx +0 -392
- package/docs/ui/components/index.mdx +0 -6
- package/docs/ui/components/inline-player.mdx +0 -58
- package/docs/ui/components/modals.mdx +0 -297
- package/docs/ui/components/offcanvas.mdx +0 -70
- package/docs/ui/components/placeholder.mdx +0 -273
- package/docs/ui/components/popover.mdx +0 -142
- package/docs/ui/components/progress.mdx +0 -241
- package/docs/ui/components/range-slider.mdx +0 -32
- package/docs/ui/components/ribbons.mdx +0 -207
- package/docs/ui/components/segmented-control.mdx +0 -401
- package/docs/ui/components/spinners.mdx +0 -135
- package/docs/ui/components/statuses.mdx +0 -322
- package/docs/ui/components/steps.mdx +0 -174
- package/docs/ui/components/switch-icon.mdx +0 -386
- package/docs/ui/components/tables.mdx +0 -397
- package/docs/ui/components/tabs.mdx +0 -396
- package/docs/ui/components/timelines.mdx +0 -697
- package/docs/ui/components/tinymce.mdx +0 -46
- package/docs/ui/components/toasts.mdx +0 -126
- package/docs/ui/components/tooltips.mdx +0 -65
- package/docs/ui/components/tracking.mdx +0 -548
- package/docs/ui/components/vector-maps.mdx +0 -166
- package/docs/ui/forms/form-color-check.mdx +0 -220
- package/docs/ui/forms/form-elements.mdx +0 -632
- package/docs/ui/forms/form-fieldset.mdx +0 -45
- package/docs/ui/forms/form-helpers.mdx +0 -91
- package/docs/ui/forms/form-image-check.mdx +0 -213
- package/docs/ui/forms/form-input-mask.mdx +0 -61
- package/docs/ui/forms/form-selectboxes.mdx +0 -398
- package/docs/ui/forms/form-validation.mdx +0 -62
- package/docs/ui/forms/index.mdx +0 -6
- package/docs/ui/getting-started/browser-support.mdx +0 -28
- package/docs/ui/getting-started/customize.mdx +0 -28
- package/docs/ui/getting-started/download.mdx +0 -44
- package/docs/ui/getting-started/faq.mdx +0 -30
- package/docs/ui/getting-started/how-to-contribute.mdx +0 -84
- package/docs/ui/getting-started/index.mdx +0 -16
- package/docs/ui/getting-started/installation.mdx +0 -67
- package/docs/ui/getting-started/license.mdx +0 -30
- package/docs/ui/index.mdx +0 -8
- package/docs/ui/layout/index.mdx +0 -6
- package/docs/ui/layout/navbars.mdx +0 -164
- package/docs/ui/layout/navs-tabls.mdx +0 -201
- package/docs/ui/layout/page-headers.mdx +0 -365
- package/docs/ui/layout/page-layouts.mdx +0 -213
- package/docs/ui/plugins/flags.mdx +0 -316
- package/docs/ui/plugins/index.mdx +0 -6
- package/docs/ui/plugins/payments.mdx +0 -152
- package/docs/ui/plugins/social-icons.mdx +0 -135
- package/docs/ui/utilities/borders.mdx +0 -260
- package/docs/ui/utilities/cursors.mdx +0 -63
- package/docs/ui/utilities/index.mdx +0 -5
- package/docs/ui/utilities/interactions.mdx +0 -26
- package/docs/ui/utilities/margins.mdx +0 -234
- package/docs/ui/utilities/vertical-align.mdx +0 -66
- package/docs/ui/utilities/visually-hidden.mdx +0 -12
- package/js/tabler.umd.js +0 -15
|
@@ -1,397 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: Tables
|
|
3
|
-
summary: Tables are useful interface elements that allow you to visualize data and arrange it in a clear way. Thanks to that, users can browse a lot of information at once and a good table design will help you take care of its clarity.
|
|
4
|
-
bootstrapLink: content/tables/
|
|
5
|
-
description: Visualize data clearly with tables.
|
|
6
|
-
---
|
|
7
|
-
|
|
8
|
-
## Basic Table
|
|
9
|
-
|
|
10
|
-
The basic table design has light padding and the presented data is separated with horizontal dividers. It helps provide users with all the necessary information, without overwhelming them with visuals.
|
|
11
|
-
|
|
12
|
-
The `.table` class adds basic styling to a table:
|
|
13
|
-
|
|
14
|
-
```html example height="360px" scrollable
|
|
15
|
-
<div class="table-responsive">
|
|
16
|
-
<table class="table table-vcenter">
|
|
17
|
-
<thead>
|
|
18
|
-
<tr>
|
|
19
|
-
<th>Name</th>
|
|
20
|
-
<th>Title</th>
|
|
21
|
-
<th>Email</th>
|
|
22
|
-
<th>Role</th>
|
|
23
|
-
<th class="w-1"></th>
|
|
24
|
-
</tr>
|
|
25
|
-
</thead>
|
|
26
|
-
<tbody>
|
|
27
|
-
<tr>
|
|
28
|
-
<td>Paweł Kuna</td>
|
|
29
|
-
<td class="text-secondary">UI Designer, Training</td>
|
|
30
|
-
<td class="text-secondary">
|
|
31
|
-
<a href="#" class="text-reset">paweluna@howstuffworks.com</a>
|
|
32
|
-
</td>
|
|
33
|
-
<td class="text-secondary">User</td>
|
|
34
|
-
<td>
|
|
35
|
-
<a href="#">Edit</a>
|
|
36
|
-
</td>
|
|
37
|
-
</tr>
|
|
38
|
-
<tr>
|
|
39
|
-
<td>Jeffie Lewzey</td>
|
|
40
|
-
<td class="text-secondary">Chemical Engineer, Support</td>
|
|
41
|
-
<td class="text-secondary">
|
|
42
|
-
<a href="#" class="text-reset">jlewzey1@seesaa.net</a>
|
|
43
|
-
</td>
|
|
44
|
-
<td class="text-secondary">Admin</td>
|
|
45
|
-
<td>
|
|
46
|
-
<a href="#">Edit</a>
|
|
47
|
-
</td>
|
|
48
|
-
</tr>
|
|
49
|
-
<tr>
|
|
50
|
-
<td>Mallory Hulme</td>
|
|
51
|
-
<td class="text-secondary">Geologist IV, Support</td>
|
|
52
|
-
<td class="text-secondary">
|
|
53
|
-
<a href="#" class="text-reset">mhulme2@domainmarket.com</a>
|
|
54
|
-
</td>
|
|
55
|
-
<td class="text-secondary">User</td>
|
|
56
|
-
<td>
|
|
57
|
-
<a href="#">Edit</a>
|
|
58
|
-
</td>
|
|
59
|
-
</tr>
|
|
60
|
-
<tr>
|
|
61
|
-
<td>Dunn Slane</td>
|
|
62
|
-
<td class="text-secondary">Research Nurse, Sales</td>
|
|
63
|
-
<td class="text-secondary">
|
|
64
|
-
<a href="#" class="text-reset">dslane3@epa.gov</a>
|
|
65
|
-
</td>
|
|
66
|
-
<td class="text-secondary">Owner</td>
|
|
67
|
-
<td>
|
|
68
|
-
<a href="#">Edit</a>
|
|
69
|
-
</td>
|
|
70
|
-
</tr>
|
|
71
|
-
<tr>
|
|
72
|
-
<td>Emmy Levet</td>
|
|
73
|
-
<td class="text-secondary">VP Product Management, Accounting</td>
|
|
74
|
-
<td class="text-secondary">
|
|
75
|
-
<a href="#" class="text-reset">elevet4@senate.gov</a>
|
|
76
|
-
</td>
|
|
77
|
-
<td class="text-secondary">Admin</td>
|
|
78
|
-
<td>
|
|
79
|
-
<a href="#">Edit</a>
|
|
80
|
-
</td>
|
|
81
|
-
</tr>
|
|
82
|
-
</tbody>
|
|
83
|
-
</table>
|
|
84
|
-
</div>
|
|
85
|
-
```
|
|
86
|
-
|
|
87
|
-
## Responsive tables
|
|
88
|
-
|
|
89
|
-
Use the `.table-responsive` class across each breakpoint for horizontal scrolling tables. If you want to create responsive tables up to a specific breakpoint, use `.table-responsive{-sm|-md|-lg|-xl}`. From that breakpoint and up, the table will behave normally, rather than scroll horizontally.
|
|
90
|
-
|
|
91
|
-
```html example height="12rem"
|
|
92
|
-
<table class="table table-responsive">
|
|
93
|
-
<thead>
|
|
94
|
-
<tr>
|
|
95
|
-
<th>#</th>
|
|
96
|
-
<th class="text-nowrap">Heading 1</th>
|
|
97
|
-
<th class="text-nowrap">Heading 2</th>
|
|
98
|
-
<th class="text-nowrap">Heading 3</th>
|
|
99
|
-
<th class="text-nowrap">Heading 4</th>
|
|
100
|
-
<th class="text-nowrap">Heading 5</th>
|
|
101
|
-
<th class="text-nowrap">Heading 6</th>
|
|
102
|
-
<th class="text-nowrap">Heading 7</th>
|
|
103
|
-
<th class="text-nowrap">Heading 8</th>
|
|
104
|
-
<th class="text-nowrap">Heading 9</th>
|
|
105
|
-
<th class="text-nowrap">Heading 10</th>
|
|
106
|
-
</tr>
|
|
107
|
-
</thead>
|
|
108
|
-
<tbody>
|
|
109
|
-
<tr>
|
|
110
|
-
<th>1</th>
|
|
111
|
-
<td>Cell</td>
|
|
112
|
-
<td>Cell</td>
|
|
113
|
-
<td>Cell</td>
|
|
114
|
-
<td>Cell</td>
|
|
115
|
-
<td>Cell</td>
|
|
116
|
-
<td>Cell</td>
|
|
117
|
-
<td>Cell</td>
|
|
118
|
-
<td>Cell</td>
|
|
119
|
-
<td>Cell</td>
|
|
120
|
-
<td>Cell</td>
|
|
121
|
-
</tr>
|
|
122
|
-
<tr>
|
|
123
|
-
<th>2</th>
|
|
124
|
-
<td>Cell</td>
|
|
125
|
-
<td>Cell</td>
|
|
126
|
-
<td>Cell</td>
|
|
127
|
-
<td>Cell</td>
|
|
128
|
-
<td>Cell</td>
|
|
129
|
-
<td>Cell</td>
|
|
130
|
-
<td>Cell</td>
|
|
131
|
-
<td>Cell</td>
|
|
132
|
-
<td>Cell</td>
|
|
133
|
-
<td>Cell</td>
|
|
134
|
-
</tr>
|
|
135
|
-
</tbody>
|
|
136
|
-
</table>
|
|
137
|
-
```
|
|
138
|
-
|
|
139
|
-
## No wrap
|
|
140
|
-
|
|
141
|
-
If you don't want the table cell content to wrap to another line, use the `table-nowrap` class.
|
|
142
|
-
|
|
143
|
-
```html example height="10rem"
|
|
144
|
-
<div class="table-responsive">
|
|
145
|
-
<table class="table table-vcenter table-nowrap">
|
|
146
|
-
<thead>
|
|
147
|
-
<tr>
|
|
148
|
-
<th>Name</th>
|
|
149
|
-
<th>Title</th>
|
|
150
|
-
<th>Email</th>
|
|
151
|
-
<th>Role</th>
|
|
152
|
-
<th></th>
|
|
153
|
-
<th class="w-1"></th>
|
|
154
|
-
</tr>
|
|
155
|
-
</thead>
|
|
156
|
-
<tbody>
|
|
157
|
-
<tr>
|
|
158
|
-
<td>Paweł Kuna</td>
|
|
159
|
-
<td class="text-secondary">UI Designer, Training</td>
|
|
160
|
-
<td class="text-secondary">
|
|
161
|
-
<a href="#" class="text-reset">paweluna@howstuffworks.com</a>
|
|
162
|
-
</td>
|
|
163
|
-
<td class="text-secondary">User</td>
|
|
164
|
-
<td>
|
|
165
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate
|
|
166
|
-
debitis deserunt expedita hic incidunt iste modi molestiae nesciunt non nostrum
|
|
167
|
-
perferendis perspiciatis placeat praesentium quaerat quo repellendus, voluptates.
|
|
168
|
-
</td>
|
|
169
|
-
<td>
|
|
170
|
-
<a href="#">Edit</a>
|
|
171
|
-
</td>
|
|
172
|
-
</tr>
|
|
173
|
-
</tbody>
|
|
174
|
-
</table>
|
|
175
|
-
</div>
|
|
176
|
-
```
|
|
177
|
-
|
|
178
|
-
```html
|
|
179
|
-
<div class="table-responsive">
|
|
180
|
-
<table class="table table-vcenter table-nowrap">
|
|
181
|
-
<thead>
|
|
182
|
-
<tr>
|
|
183
|
-
<th>Name</th>
|
|
184
|
-
<th>Title</th>
|
|
185
|
-
<th>Email</th>
|
|
186
|
-
<th>Role</th>
|
|
187
|
-
<th></th>
|
|
188
|
-
<th class="w-1"></th>
|
|
189
|
-
</tr>
|
|
190
|
-
</thead>
|
|
191
|
-
<tbody>
|
|
192
|
-
<tr>
|
|
193
|
-
<td>Paweł Kuna</td>
|
|
194
|
-
<td class="text-secondary">UI Designer, Training</td>
|
|
195
|
-
<td class="text-secondary">
|
|
196
|
-
<a href="#" class="text-reset">paweluna@howstuffworks.com</a>
|
|
197
|
-
</td>
|
|
198
|
-
<td class="text-secondary">User</td>
|
|
199
|
-
<td>
|
|
200
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate
|
|
201
|
-
debitis deserunt expedita hic incidunt iste modi molestiae nesciunt non nostrum
|
|
202
|
-
perferendis perspiciatis placeat praesentium quaerat quo repellendus, voluptates.
|
|
203
|
-
</td>
|
|
204
|
-
<td>
|
|
205
|
-
<a href="#">Edit</a>
|
|
206
|
-
</td>
|
|
207
|
-
</tr>
|
|
208
|
-
<tr>
|
|
209
|
-
<td>Jeffie Lewzey</td>
|
|
210
|
-
<td class="text-secondary">Chemical Engineer, Support</td>
|
|
211
|
-
<td class="text-secondary">
|
|
212
|
-
<a href="#" class="text-reset">jlewzey1@seesaa.net</a>
|
|
213
|
-
</td>
|
|
214
|
-
<td class="text-secondary">Admin</td>
|
|
215
|
-
<td>
|
|
216
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate
|
|
217
|
-
debitis deserunt expedita hic incidunt iste modi molestiae nesciunt non nostrum
|
|
218
|
-
perferendis perspiciatis placeat praesentium quaerat quo repellendus, voluptates.
|
|
219
|
-
</td>
|
|
220
|
-
<td>
|
|
221
|
-
<a href="#">Edit</a>
|
|
222
|
-
</td>
|
|
223
|
-
</tr>
|
|
224
|
-
<tr>
|
|
225
|
-
<td>Mallory Hulme</td>
|
|
226
|
-
<td class="text-secondary">Geologist IV, Support</td>
|
|
227
|
-
<td class="text-secondary">
|
|
228
|
-
<a href="#" class="text-reset">mhulme2@domainmarket.com</a>
|
|
229
|
-
</td>
|
|
230
|
-
<td class="text-secondary">User</td>
|
|
231
|
-
<td>
|
|
232
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate
|
|
233
|
-
debitis deserunt expedita hic incidunt iste modi molestiae nesciunt non nostrum
|
|
234
|
-
perferendis perspiciatis placeat praesentium quaerat quo repellendus, voluptates.
|
|
235
|
-
</td>
|
|
236
|
-
<td>
|
|
237
|
-
<a href="#">Edit</a>
|
|
238
|
-
</td>
|
|
239
|
-
</tr>
|
|
240
|
-
<tr>
|
|
241
|
-
<td>Dunn Slane</td>
|
|
242
|
-
<td class="text-secondary">Research Nurse, Sales</td>
|
|
243
|
-
<td class="text-secondary">
|
|
244
|
-
<a href="#" class="text-reset">dslane3@epa.gov</a>
|
|
245
|
-
</td>
|
|
246
|
-
<td class="text-secondary">Owner</td>
|
|
247
|
-
<td>
|
|
248
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate
|
|
249
|
-
debitis deserunt expedita hic incidunt iste modi molestiae nesciunt non nostrum
|
|
250
|
-
perferendis perspiciatis placeat praesentium quaerat quo repellendus, voluptates.
|
|
251
|
-
</td>
|
|
252
|
-
<td>
|
|
253
|
-
<a href="#">Edit</a>
|
|
254
|
-
</td>
|
|
255
|
-
</tr>
|
|
256
|
-
<tr>
|
|
257
|
-
<td>Emmy Levet</td>
|
|
258
|
-
<td class="text-secondary">VP Product Management, Accounting</td>
|
|
259
|
-
<td class="text-secondary">
|
|
260
|
-
<a href="#" class="text-reset">elevet4@senate.gov</a>
|
|
261
|
-
</td>
|
|
262
|
-
<td class="text-secondary">Admin</td>
|
|
263
|
-
<td>
|
|
264
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate
|
|
265
|
-
debitis deserunt expedita hic incidunt iste modi molestiae nesciunt non nostrum
|
|
266
|
-
perferendis perspiciatis placeat praesentium quaerat quo repellendus, voluptates.
|
|
267
|
-
</td>
|
|
268
|
-
<td>
|
|
269
|
-
<a href="#">Edit</a>
|
|
270
|
-
</td>
|
|
271
|
-
</tr>
|
|
272
|
-
</tbody>
|
|
273
|
-
</table>
|
|
274
|
-
</div>
|
|
275
|
-
```
|
|
276
|
-
|
|
277
|
-
## Table Variants
|
|
278
|
-
|
|
279
|
-
```html example height="360px" scrollable
|
|
280
|
-
<table class="table">
|
|
281
|
-
<thead>
|
|
282
|
-
<tr>
|
|
283
|
-
<th scope="col">Class</th>
|
|
284
|
-
<th scope="col">Heading</th>
|
|
285
|
-
<th scope="col">Heading</th>
|
|
286
|
-
</tr>
|
|
287
|
-
</thead>
|
|
288
|
-
<tbody>
|
|
289
|
-
<tr>
|
|
290
|
-
<th scope="row">Default</th>
|
|
291
|
-
<td>Cell</td>
|
|
292
|
-
<td>Cell</td>
|
|
293
|
-
</tr>
|
|
294
|
-
<tr class="table-primary">
|
|
295
|
-
<th scope="row">Primary</th>
|
|
296
|
-
<td>Cell</td>
|
|
297
|
-
<td>Cell</td>
|
|
298
|
-
</tr>
|
|
299
|
-
<tr class="table-secondary">
|
|
300
|
-
<th scope="row">Secondary</th>
|
|
301
|
-
<td>Cell</td>
|
|
302
|
-
<td>Cell</td>
|
|
303
|
-
</tr>
|
|
304
|
-
<tr class="table-success">
|
|
305
|
-
<th scope="row">Success</th>
|
|
306
|
-
<td>Cell</td>
|
|
307
|
-
<td>Cell</td>
|
|
308
|
-
</tr>
|
|
309
|
-
<tr class="table-danger">
|
|
310
|
-
<th scope="row">Danger</th>
|
|
311
|
-
<td>Cell</td>
|
|
312
|
-
<td>Cell</td>
|
|
313
|
-
</tr>
|
|
314
|
-
<tr class="table-warning">
|
|
315
|
-
<th scope="row">Warning</th>
|
|
316
|
-
<td>Cell</td>
|
|
317
|
-
<td>Cell</td>
|
|
318
|
-
</tr>
|
|
319
|
-
<tr class="table-info">
|
|
320
|
-
<th scope="row">Info</th>
|
|
321
|
-
<td>Cell</td>
|
|
322
|
-
<td>Cell</td>
|
|
323
|
-
</tr>
|
|
324
|
-
<tr class="table-light">
|
|
325
|
-
<th scope="row">Light</th>
|
|
326
|
-
<td>Cell</td>
|
|
327
|
-
<td>Cell</td>
|
|
328
|
-
</tr>
|
|
329
|
-
<tr class="table-dark">
|
|
330
|
-
<th scope="row">Dark</th>
|
|
331
|
-
<td>Cell</td>
|
|
332
|
-
<td>Cell</td>
|
|
333
|
-
</tr>
|
|
334
|
-
</tbody>
|
|
335
|
-
</table>
|
|
336
|
-
```
|
|
337
|
-
|
|
338
|
-
## Table with sticky header
|
|
339
|
-
|
|
340
|
-
```html example scrollable
|
|
341
|
-
<table class="table">
|
|
342
|
-
<thead class="sticky-top">
|
|
343
|
-
<tr>
|
|
344
|
-
<th scope="col">Class</th>
|
|
345
|
-
<th scope="col">Heading</th>
|
|
346
|
-
<th scope="col">Heading</th>
|
|
347
|
-
</tr>
|
|
348
|
-
</thead>
|
|
349
|
-
<tbody>
|
|
350
|
-
<tr>
|
|
351
|
-
<th scope="row">Default</th>
|
|
352
|
-
<td>Cell</td>
|
|
353
|
-
<td>Cell</td>
|
|
354
|
-
</tr>
|
|
355
|
-
<tr>
|
|
356
|
-
<th scope="row">Primary</th>
|
|
357
|
-
<td>Cell</td>
|
|
358
|
-
<td>Cell</td>
|
|
359
|
-
</tr>
|
|
360
|
-
<tr>
|
|
361
|
-
<th scope="row">Secondary</th>
|
|
362
|
-
<td>Cell</td>
|
|
363
|
-
<td>Cell</td>
|
|
364
|
-
</tr>
|
|
365
|
-
<tr>
|
|
366
|
-
<th scope="row">Success</th>
|
|
367
|
-
<td>Cell</td>
|
|
368
|
-
<td>Cell</td>
|
|
369
|
-
</tr>
|
|
370
|
-
<tr>
|
|
371
|
-
<th scope="row">Danger</th>
|
|
372
|
-
<td>Cell</td>
|
|
373
|
-
<td>Cell</td>
|
|
374
|
-
</tr>
|
|
375
|
-
<tr>
|
|
376
|
-
<th scope="row">Warning</th>
|
|
377
|
-
<td>Cell</td>
|
|
378
|
-
<td>Cell</td>
|
|
379
|
-
</tr>
|
|
380
|
-
<tr>
|
|
381
|
-
<th scope="row">Info</th>
|
|
382
|
-
<td>Cell</td>
|
|
383
|
-
<td>Cell</td>
|
|
384
|
-
</tr>
|
|
385
|
-
<tr>
|
|
386
|
-
<th scope="row">Light</th>
|
|
387
|
-
<td>Cell</td>
|
|
388
|
-
<td>Cell</td>
|
|
389
|
-
</tr>
|
|
390
|
-
<tr class="table-dark">
|
|
391
|
-
<th scope="row">Dark</th>
|
|
392
|
-
<td>Cell</td>
|
|
393
|
-
<td>Cell</td>
|
|
394
|
-
</tr>
|
|
395
|
-
</tbody>
|
|
396
|
-
</table>
|
|
397
|
-
```
|