Tables
Definition
A table is a structured set of data made up of rows and columns (tabular data). A table allows you to quickly and easily look up values that indicate some kind of connection between different types of data, for example a person and their age, or a day of the week, or the timetable for a local swimming pool.
Description
Use tables to display tabular data only. If the data isn't tabular you probably want to use a different component to display your information, like a list component.
Table interaction will vary based on viewport and table size. One table solution can be used to support small and very large tables.
Our default table will use several modifier classes. These classes have been modified to meet our design needs.
Accessibility Considerations
Screen reader users are able to navigate data tables from cell to cell, in a multi-directional way (up, down, right, left), much like navigating a spreadsheet. As they move from cell to cell, screen readers will read the associated header labels (if the table has been created with accessibility in mind). This structure and easy navigation ability with screen readers make tables well-suited to tabular data.
Use tabindex=”0” on the table’s container so that keyboard
users can tab into the table and use arrow keys to move around.
Table Names
Normally, <caption> elements are placed within the <table>
element. This approach doesn't work since the caption appears outside of the
table. For this design, the table must be placed within a <figure> element with a <figcaption> above the table.
When displaying multiple tables on the same page make sure each table caption is unique.
Table Summaries
A table summary is not required. Ideally the table would be simple enough and well-organized enough that the table is self-explanatory just by virtue of the headers and data structure. Even so, it can sometimes be helpful to provide a brief summary of the main points of the table, to help them understand data trends, data format, and/or other aspects of the table that can make the table more understandable to screen reader users. Summaries should be brief and concise: usually a sentence or two, but perhaps longer for more complex tables.
We recommend the following options for table summaries...
-
Summary in the the paragraph preceding or following the table with
aria-describedby - Summary in the
fig-caption
The scope attribute
Table data cells MUST be associated with their corresponding header cells. The scope attribute makes an explicit association between the table header cell and its corresponding data cells. For simple associations, the options are scope="col" for column headers, and scope="row" for row headers.
|
Status message: 'Verified'
Index
|
Given First Name
|
Last
|
|---|---|---|
| 1 | Mark | Otto |
| 2 | Jacob | tdornton |
| 3 | Larry | Bird |
<figure>
<figcaption>Caption: Table Summary (Basic Table)</figcaption>
<div class="table-responsive border border-dark mt-2">
<table class="table table-light table-bordered mb-0" tabindex="0">
<thead>
<tr>
<th scope="col">
<div class="d-flex w-100">
<svg
class="me-3"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512">
<path
d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z" />
</svg>
<span class="visually-hidden">Status message: 'Verified'</span>
<span class="js-tbl-trunc">Index</span>
<button class="btn btn-icon sort">
<i class="fa-solid fa-arrow-down-arrow-up"></i
><span class="visually-hidden">Sort column</span>
</button>
</div>
</th>
<th scope="col">
<div class="d-flex w-100">
<span class="js-tbl-trunc">Given First Name</span>
<button class="btn btn-icon sort">
<i class="fa-solid fa-arrow-down-arrow-up"></i
><span class="visually-hidden">Sort column</span>
</button>
</div>
</th>
<th scope="col">
<div class="d-flex w-100">
<span class="js-tbl-trunc">Last</span>
<button
class="btn btn-icon dropdown-toggle"
data-bs-toggle="dropdown"
type="button"
aria-expanded="false">
<i class="fas fa-ellipsis-v"></i>
<span class="visually-hidden">Column Options</span>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">Action</a>
</li>
<li>
<a class="dropdown-item" href="#">Another action</a>
</li>
<li>
<a class="dropdown-item" href="#">Something else here</a>
</li>
</ul>
</button>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">1</td>
<td>Mark</td>
<td>Otto</td>
</tr>
<tr>
<td scope="row">2</td>
<td>Jacob</td>
<td>tdornton</td>
</tr>
<tr>
<td scope="row">3</td>
<td>Larry</td>
<td>Bird</td>
</tr>
</tbody>
</table>
</div>
</figure>Large Table
Tables always have a sticky-left-column and sticky-top-header-row regardless of table size. Sticky positioning only comes into effect when the table overflows its container.
Custom scrollbar styles have been provided so that the thumb and track of the scroller conform to the rounded borders of the table design.
|
Status message: 'Verified'
Index of the item from API
|
Status message: 'Verified'
Given First LongnameOver30Characters
|
Last
|
Handle | Description | |
|---|---|---|---|---|---|
| 1 | Mark has a really really really long name | Otto | @mdo | [email protected] | Sometimes you just need a little more text to test things out. |
| 2 | Jacob | tdornton | @fat | [email protected] | Sometimes you just need a little more text to test things out. |
| 3 | Larry | Bird | [email protected] | Sometimes you just need a little more text to test things out. | |
| 4 | Jacob | tdornton | @fat | [email protected] | Sometimes you just need a little more text to test things out. |
| 5 | Jacob | tdornton | @fat | [email protected] | Sometimes you just need a little more text to test things out. |
| 6 | Jacob | tdornton | @fat | [email protected] | Sometimes you just need a little more text to test things out. |
| 7 | Jacob | tdornton | @fat | [email protected] | Sometimes you just need a little more text to test things out. |
| 8 | Jacob | tdornton | @fat | [email protected] | Sometimes you just need a little more text to test things out. |
| 9 | Jacob | tdornton | @fat | [email protected] | Sometimes you just need a little more text to test things out. |
| 10 | Jacob | tdornton | @fat | [email protected] | Sometimes you just need a little more text to test things out. |
| 11 | Jacob | tdornton | @fat | [email protected] | Sometimes you just need a little more text to test things out. |
| 12 | Jacob | tdornton | @fat | [email protected] | Sometimes you just need a little more text to test things out. |
| 13 | Jacob | tdornton | @fat | [email protected] | Sometimes you just need a little more text to test things out. |
<figure>
<figcaption>Caption: Large Table Summary</figcaption>
<div></div>
<div class="table-responsive border border-dark mt-2">
<table class="table table-light mb-0" tabindex="0">
<thead>
<tr>
<th scope="col">
<div class="d-flex w-100">
<i class="fa-solid fa-circle-check me-3"></i>
<span class="visually-hidden">Status message: 'Verified'</span>
<span class="js-tbl-trunc">Index of the item from API</span>
<button class="btn btn-icon sort">
<i class="fa-solid fa-arrow-down-arrow-up"></i
><span class="visually-hidden">Sort column</span>
</button>
</div>
</th>
<th scope="col">
<div class="d-flex w-100">
<i class="fa-solid fa-circle-check me-3"></i>
<span class="visually-hidden">Status message: 'Verified'</span>
<span class="js-tbl-trunc"
><a href="https://www.cnn.com/"
>Given First LongnameOver30Characters</a
>
</span>
<button class="btn btn-icon sort">
<i class="fa-solid fa-arrow-down-arrow-up"></i
><span class="visually-hidden">Sort column</span>
</button>
</div>
</th>
<th scope="col">
<div class="d-flex w-100">
<span class="js-tbl-trunc">Last</span>
<button
class="btn btn-icon dropdown-toggle"
data-bs-toggle="dropdown"
type="button"
aria-expanded="false">
<i class="fas fa-ellipsis-v"></i>
<span class="visually-hidden">Column Options</span>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">Action</a>
</li>
<li>
<a class="dropdown-item" href="#">Another action</a>
</li>
<li>
<a class="dropdown-item" href="#">Something else here</a>
</li>
</ul>
</button>
</div>
</th>
<th scope="col"><span class="js-tbl-trunc">Handle</span></th>
<th scope="col"><span class="js-tbl-trunc">Email</span></th>
<th scope="col"><span class="js-tbl-trunc">Description</span></th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">1</td>
<td>Mark has a really really really long name</td>
<td>Otto</td>
<td>@mdo</td>
<td>[email protected]</td>
<td>
Sometimes you just need a little more text to test things out.
</td>
</tr>
<tr>
<td scope="row">2</td>
<td>Jacob</td>
<td>tdornton</td>
<td>@fat</td>
<td>[email protected]</td>
<td>
Sometimes you just need a little more text to test things out.
</td>
</tr>
<tr>
<td scope="row">3</td>
<td>Larry</td>
<td>Bird</td>
<td>@twitter</td>
<td>[email protected]</td>
<td>
Sometimes you just need a little more text to test things out.
</td>
</tr>
<tr>
<td scope="row">4</td>
<td>Jacob</td>
<td>tdornton</td>
<td>@fat</td>
<td>[email protected]</td>
<td>
Sometimes you just need a little more text to test things out.
</td>
</tr>
<tr>
<td scope="row">5</td>
<td>Jacob</td>
<td>tdornton</td>
<td>@fat</td>
<td>[email protected]</td>
<td>
Sometimes you just need a little more text to test things out.
</td>
</tr>
<tr>
<td scope="row">6</td>
<td>Jacob</td>
<td>tdornton</td>
<td>@fat</td>
<td>[email protected]</td>
<td>
Sometimes you just need a little more text to test things out.
</td>
</tr>
<tr>
<td scope="row">7</td>
<td>Jacob</td>
<td>tdornton</td>
<td>@fat</td>
<td>[email protected]</td>
<td>
Sometimes you just need a little more text to test things out.
</td>
</tr>
<tr>
<td scope="row">8</td>
<td>Jacob</td>
<td>tdornton</td>
<td>@fat</td>
<td>[email protected]</td>
<td>
Sometimes you just need a little more text to test things out.
</td>
</tr>
<tr>
<td scope="row">9</td>
<td>Jacob</td>
<td>tdornton</td>
<td>@fat</td>
<td>[email protected]</td>
<td>
Sometimes you just need a little more text to test things out.
</td>
</tr>
<tr>
<td scope="row">10</td>
<td>Jacob</td>
<td>tdornton</td>
<td>@fat</td>
<td>[email protected]</td>
<td>
Sometimes you just need a little more text to test things out.
</td>
</tr>
<tr>
<td scope="row">11</td>
<td>Jacob</td>
<td>tdornton</td>
<td>@fat</td>
<td>[email protected]</td>
<td>
Sometimes you just need a little more text to test things out.
</td>
</tr>
<tr>
<td scope="row">12</td>
<td>Jacob</td>
<td>tdornton</td>
<td>@fat</td>
<td>[email protected]</td>
<td>
Sometimes you just need a little more text to test things out.
</td>
</tr>
<tr>
<td scope="row">13</td>
<td>Jacob</td>
<td>tdornton</td>
<td>@fat</td>
<td>[email protected]</td>
<td>
Sometimes you just need a little more text to test things out.
</td>
</tr>
</tbody>
</table>
</div>
</figure>
<nav class="d-flex justify-content-end" aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link">Previous</a>
</li>
<li class="page-item active" aria-current="page">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item">
<a class="page-link" href="#">3</a>
</li>
<li class="page-item">
<a class="page-link" href="#">4</a>
</li>
<li class="page-item">
<a class="page-link" href="#">5</a>
</li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>Variants
No outer border and/or fixed witdh columns
Use the .border-0 utility class to remove the border from the outside
of a table.
Add the .col-fixed-width class to the .table class
to have the columns be fixed width. It is not recommended to have your columns
fixed width if you are have a lot of columns as content will get hard to parse.
NOTE: the fixed width columns will not remain after breakpoint
992px. They will return to auto and varying size.
|
Index of the item from API
|
Last
|
Handle | Description | ||
|---|---|---|---|---|---|
| 1 | Mark has a really really really long name | Otto | @mdo | [email protected] | Sometimes you just need a little more text to test things out. |
| 2 | Jacob | tdornton | @fat | [email protected] | Sometimes you just need a little more text to test things out. |
| 3 | Larry | Bird | [email protected] | Sometimes you just need a little more text to test things out. | |
| 4 | Jacob | tdornton | @fat | [email protected] | Sometimes you just need a little more text to test things out. |
| 5 | Jacob | tdornton | @fat | [email protected] | Sometimes you just need a little more text to test things out. |
| 6 | Jacob | tdornton | @fat | [email protected] | Sometimes you just need a little more text to test things out. |
| 7 | Jacob | tdornton | @fat | [email protected] | Sometimes you just need a little more text to test things out. |
| 8 | Jacob | tdornton | @fat | [email protected] | Sometimes you just need a little more text to test things out. |
| 9 | Jacob | tdornton | @fat | [email protected] | Sometimes you just need a little more text to test things out. |
| 10 | Jacob | tdornton | @fat | [email protected] | Sometimes you just need a little more text to test things out. |
| 11 | Jacob | tdornton | @fat | [email protected] | Sometimes you just need a little more text to test things out. |
| 12 | Jacob | tdornton | @fat | [email protected] | Sometimes you just need a little more text to test things out. |
| 13 | Jacob | tdornton | @fat | [email protected] | Sometimes you just need a little more text to test things out. |
<figure>
<figcaption>Caption: Table Summary (No Outer Border)</figcaption>
<div></div>
<div class="table-responsive border-0 border-dark mt-2">
<table
class="table table-light table-bordered border-0 mb-0 col-fixed-width"
tabindex="0">
<thead>
<tr>
<th scope="col">
<div class="d-flex w-100">
<span class="js-tbl-trunc">Index of the item from API</span>
<button class="btn btn-icon sort">
<i class="fa-solid fa-arrow-down-arrow-up"></i
><span class="visually-hidden">Sort column</span>
</button>
</div>
</th>
<th scope="col">
<div class="d-flex w-100">
<span class="js-tbl-trunc"
><a href="https://www.google.com/">Given First Name</a>
</span>
<button class="btn btn-icon sort">
<i class="fa-solid fa-arrow-down-arrow-up"></i
><span class="visually-hidden">Sort column</span>
</button>
</div>
</th>
<th scope="col">
<div class="d-flex w-100">
<span class="js-tbl-trunc">Last</span>
<button
class="btn btn-icon dropdown-toggle"
data-bs-toggle="dropdown"
type="button"
aria-expanded="false">
<i class="fas fa-ellipsis-v"></i>
<span class="visually-hidden">Column Options</span>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">Action</a>
</li>
<li>
<a class="dropdown-item" href="#">Another action</a>
</li>
<li>
<a class="dropdown-item" href="#">Something else here</a>
</li>
</ul>
</button>
</div>
</th>
<th scope="col"><span class="js-tbl-trunc">Handle</span></th>
<th scope="col"><span class="js-tbl-trunc">Email</span></th>
<th scope="col"><span class="js-tbl-trunc">Description</span></th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">1</td>
<td>Mark has a really really really long name</td>
<td>Otto</td>
<td>@mdo</td>
<td>[email protected]</td>
<td>
Sometimes you just need a little more text to test things out.
</td>
</tr>
<tr>
<td scope="row">2</td>
<td>Jacob</td>
<td>tdornton</td>
<td>@fat</td>
<td>[email protected]</td>
<td>
Sometimes you just need a little more text to test things out.
</td>
</tr>
<tr>
<td scope="row">3</td>
<td>Larry</td>
<td>Bird</td>
<td>@twitter</td>
<td>[email protected]</td>
<td>
Sometimes you just need a little more text to test things out.
</td>
</tr>
<tr>
<td scope="row">4</td>
<td>Jacob</td>
<td>tdornton</td>
<td>@fat</td>
<td>[email protected]</td>
<td>
Sometimes you just need a little more text to test things out.
</td>
</tr>
<tr>
<td scope="row">5</td>
<td>Jacob</td>
<td>tdornton</td>
<td>@fat</td>
<td>[email protected]</td>
<td>
Sometimes you just need a little more text to test things out.
</td>
</tr>
<tr>
<td scope="row">6</td>
<td>Jacob</td>
<td>tdornton</td>
<td>@fat</td>
<td>[email protected]</td>
<td>
Sometimes you just need a little more text to test things out.
</td>
</tr>
<tr>
<td scope="row">7</td>
<td>Jacob</td>
<td>tdornton</td>
<td>@fat</td>
<td>[email protected]</td>
<td>
Sometimes you just need a little more text to test things out.
</td>
</tr>
<tr>
<td scope="row">8</td>
<td>Jacob</td>
<td>tdornton</td>
<td>@fat</td>
<td>[email protected]</td>
<td>
Sometimes you just need a little more text to test things out.
</td>
</tr>
<tr>
<td scope="row">9</td>
<td>Jacob</td>
<td>tdornton</td>
<td>@fat</td>
<td>[email protected]</td>
<td>
Sometimes you just need a little more text to test things out.
</td>
</tr>
<tr>
<td scope="row">10</td>
<td>Jacob</td>
<td>tdornton</td>
<td>@fat</td>
<td>[email protected]</td>
<td>
Sometimes you just need a little more text to test things out.
</td>
</tr>
<tr>
<td scope="row">11</td>
<td>Jacob</td>
<td>tdornton</td>
<td>@fat</td>
<td>[email protected]</td>
<td>
Sometimes you just need a little more text to test things out.
</td>
</tr>
<tr>
<td scope="row">12</td>
<td>Jacob</td>
<td>tdornton</td>
<td>@fat</td>
<td>[email protected]</td>
<td>
Sometimes you just need a little more text to test things out.
</td>
</tr>
<tr>
<td scope="row">13</td>
<td>Jacob</td>
<td>tdornton</td>
<td>@fat</td>
<td>[email protected]</td>
<td>
Sometimes you just need a little more text to test things out.
</td>
</tr>
</tbody>
</table>
</div>
</figure>Frequency Table
Use .bg-white class to make the background color of a table cell
white. You can use the text-align utility classes (.text-end)
to align cell content. Control font-weight with utility classes as well (.fw-bold).
| Count | % Valid | % Valid Cum. | % Total | % Total Cum. | |
|---|---|---|---|---|---|
| (0) None | 1234 | 1234 | 1234 | 1234 | 1234 |
| (1) Little | 1234 | 1234 | 1234 | 1234 | 1234 |
| (2) Moderate | 1234 | 1234 | 1234 | 1234 | 1234 |
| (3) Quite | 1234 | 1234 | 1234 | 1234 | 1234 |
| (4) Extreme | 1234 | 1234 | 1234 | 1234 | 1234 |
| (\) Did not respond | 1234 | 1234 | 1234 | 1234 | 1234 |
| Total | 1234 | 1234 | 1234 | 1234 | 1234 |
<figure>
<figcaption>Frequency distribution for variable: BS1_4</figcaption>
<div class="table-responsive border border-dark mt-2">
<table class="table table-bordered table-light mb-0" tabindex="0">
<thead>
<tr>
<th class="bg-white" scope="col"></th>
<th scope="col">
<span>Count</span>
</th>
<th scope="col">
<span>% Valid</span>
</th>
<th>
<span>% Valid Cum.</span>
</th>
<th>
<span>% Total</span>
</th>
<th>
<span>% Total Cum.</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="fw-bold" scope="row">(0) None</td>
<td class="text-end">1234</td>
<td class="text-end">1234</td>
<td class="text-end">1234</td>
<td class="text-end">1234</td>
<td class="text-end">1234</td>
</tr>
<tr>
<td class="fw-bold" scope="row">(1) Little</td>
<td class="text-end">1234</td>
<td class="text-end">1234</td>
<td class="text-end">1234</td>
<td class="text-end">1234</td>
<td class="text-end">1234</td>
</tr>
<tr>
<td class="fw-bold" scope="row">(2) Moderate</td>
<td class="text-end">1234</td>
<td class="text-end">1234</td>
<td class="text-end">1234</td>
<td class="text-end">1234</td>
<td class="text-end">1234</td>
</tr>
<tr>
<td class="fw-bold" scope="row">(3) Quite</td>
<td class="text-end">1234</td>
<td class="text-end">1234</td>
<td class="text-end">1234</td>
<td class="text-end">1234</td>
<td class="text-end">1234</td>
</tr>
<tr>
<td class="fw-bold" scope="row">(4) Extreme</td>
<td class="text-end">1234</td>
<td class="text-end">1234</td>
<td class="text-end">1234</td>
<td class="text-end">1234</td>
<td class="text-end">1234</td>
</tr>
<tr>
<td class="fw-bold" scope="row">(\\) Did not respond</td>
<td class="text-end">1234</td>
<td class="text-end">1234</td>
<td class="text-end">1234</td>
<td class="text-end">1234</td>
<td class="text-end">1234</td>
</tr>
<tr>
<td class="fw-bold" scope="row">Total</td>
<td class="text-end">1234</td>
<td class="text-end">1234</td>
<td class="text-end">1234</td>
<td class="text-end">1234</td>
<td class="text-end">1234</td>
</tr>
</tbody>
</table>
</div>
</figure>Complex Header
Creating a table with a complex header, like cross-tabs, that has labels for
each direction of cells, requires a .complex-header class on the
<thead> element. The label cells ("DOBM" and "RT314" in this
example) also require a .label class to style them correctly. The
left-most column is a header, so be sure to code that cell as <th>. Add a .table-group-divider
to make new sections and style the text correctly. To make the table easier to
read, add a .table-hover class to the table element.
When a lot of data is shown, as in crosstabs, add a .table-sm to
make the data easier to read.
| DOBM | |||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| RT314 |
JANUARY (01) |
FEBRUARY (02) |
MARCH (03) |
APRIL (04) |
MAY (05) |
JUNE (06) |
JULY (07) |
AUGUST (08) |
SEPTEMBER (09) |
OCTOBER (10) |
NOVEMBER (11) |
DECEMBER (12) |
Row Total |
| NOT AT ALL (1) | N=17 | 24 | 25 | 21 | 19 | 16 | 26 | 16 | 28 | 25 | 25 | 31 | 273 |
| Row % | 6.23% | 8.79% | 9.16% | 7.69% | 6.96% | 5.86% | 9.52% | 5.86% | 10.26% | 9.16% | 9.16% | 11.36% | 100% |
| Column % | 47.22% | 53.33% | 53.19% | 50.00% | 44.19% | 40.00% | 49.06% | 37.21% | 54.90% | 46.30% | 46.30% | 60.78% | 48.84% |
| Total % | 3.04% | 4.29% | 4.47% | 3.76% | 3.40% | 2.86% | 4.65% | 2.86% | 5.01% | 4.47% | 4.47% | 5.55% | 48.84% |
| ABOUT ONCE A YEAR (2) | N=3 | 7 | 8 | 6 | 9 | 4 | 8 | 11 | 3 | 7 | 8 | 3 | 77 |
| 3.90% | 9.09% | 10.39% | 7.79% | 11.69% | 5.19% | 10.39% | 14.29% | 3.90% | 9.09% | 10.39% | 3.90% | 100% | |
| 8.33% | 15.56% | 17.02% | 14.29% | 20.93% | 10.00% | 15.09% | 25.58% | 5.88% | 12.96% | 14.81% | 5.88% | 13.77% | |
| 0.54% | 1.25% | 1.43% | 1.07% | 1.61% | 0.72% | 1.43% | 1.97% | 0.54% | 1.25% | 1.43% | 0.54% | 13.77% | |
| SEVERAL TIMES A YEAR (3) | N=3 | 8 | 8 | 5 | 7 | 7 | 7 | 6 | 5 | 11 | 8 | 5 | 80 |
| 3.75% | 10.00% | 10.00% | 6.25% | 8.75% | 8.75% | 8.75% | 7.50% | 6.25% | 13.75% | 10.00% | 6.25% | 100% | |
| 8.33% | 17.78% | 17.02% | 11.90% | 16.28% | 17.50% | 13.21% | 13.95% | 9.80% | 20.37% | 14.81% | 9.80% | 14.31% | |
| 0.54% | 1.43% | 1.43% | 0.89% | 1.25% | 1.25% | 1.25% | 1.07% | 0.89% | 1.97% | 1.43% | 0.89% | 14.31% | |
| ONE TO THREE TIMES A MONTH (4) | N=5 | 1 | 0 | 3 | 2 | 4 | 5 | 3 | 0 | 2 | 2 | 0 | 27 |
| 18.52% | 3.70% | 0.00% | 11.11% | 7.41% | 14.81% | 18.52% | 11.11% | 0.00% | 7.41% | 7.41% | 0.00% | 100% | |
| 13.89% | 2.22% | 0.00% | 7.14% | 4.65% | 10.00% | 9.43% | 6.98% | 0.00% | 3.70% | 3.70% | 0.00% | 4.83% | |
| 0.89% | 0.18% | 0.00% | 0.54% | 0.36% | 0.72% | 0.89% | 0.54% | 0.00% | 0.36% | 0.36% | 0.00% | 4.83% | |
| ABOUT ONCE A WEEK (5) | N=1 | 0 | 0 | 0 | 0 | 3 | 0 | 1 | 2 | 0 | 1 | 3 | 11 |
| 9.09% | 0.00% | 0.00% | 0.00% | 0.00% | 27.27% | 0.00% | 9.09% | 18.18% | 0.00% | 9.09% | 27.27% | 100% | |
| 2.78% | 0.00% | 0.00% | 0.00% | 0.00% | 7.50% | 0.00% | 2.33% | 3.92% | 0.00% | 1.85% | 5.88% | 1.97% | |
| 0.18% | 0.00% | 0.00% | 0.00% | 0.00% | 0.54% | 0.00% | 0.18% | 0.36% | 0.00% | 0.18% | 0.54% | 1.97% | |
| MORE THAN ONCE A WEEK (6) | N=1 | 0 | 1 | 2 | 2 | 2 | 1 | 1 | 1 | 0 | 2 | 0 | 13 |
| 7.69% | 0.00% | 7.69% | 15.38% | 15.38% | 15.38% | 7.69% | 7.69% | 7.69% | 0.00% | 15.38% | 0.00% | 100% | |
| 2.78% | 0.00% | 2.13% | 4.76% | 4.65% | 5.00% | 1.89% | 2.33% | 1.96% | 0.00% | 3.70% | 0.00% | 2.33% | |
| 0.18% | 0.00% | 0.18% | 0.36% | 0.36% | 0.36% | 0.18% | 0.18% | 0.18% | 0.00% | 0.36% | 0.00% | 2.33% | |
| R SAYS FORMER SPOUSES/PARTNERS PARENTS ARE DECEASED (9) | N=6 | 5 | 5 | 5 | 4 | 4 | 6 | 5 | 12 | 9 | 8 | 9 | 78 |
| 7.69% | 6.41% | 6.41% | 6.41% | 5.13% | 5.13% | 7.69% | 6.41% | 15.38% | 11.54% | 10.26% | 11.54% | 100% | |
| 16.67% | 11.11% | 10.64% | 11.90% | 9.30% | 10.00% | 11.32% | 11.63% | 23.53% | 16.67% | 14.81% | 17.65% | 13.95% | |
| 1.07% | 0.89% | 0.89% | 0.89% | 0.72% | 0.72% | 1.07% | 0.89% | 2.15% | 1.61% | 1.43% | 1.61% | 13.95% | |
| Col Total | N=36 | 45 | 47 | 42 | 43 | 40 | 53 | 43 | 51 | 54 | 54 | 51 | 559 |
| 6.44% | 8.05% | 8.41% | 7.51% | 7.69% | 7.16% | 9.48% | 7.69% | 9.12% | 9.66% | 9.66% | 9.12% | 100% | |
| 100% | 100% | 100% | 100% | 100% | 100% | 100% | 100% | 100% | 100% | 100% | 100% | 100% | |
| 6.44% | 8.05% | 8.41% | 7.51% | 7.69% | 7.16% | 9.48% | 7.69% | 9.12% | 9.66% | 9.66% | 9.12% | 100% | |
<figure>
<figcaption data-cy="figcaption">Control :</figcaption>
<div class="table-responsive border-0">
<table
class="table table-light table-bordered table-hover table-sm mb-0"
tabindex="0">
<thead class="complex-header" cy-data="crosstab-table-header">
<tr>
<th></th>
<th class="label" colspan="13">DOBM</th>
</tr>
<tr class="tr-row-bd">
<th class="label" scope="col">RT314</th>
<th scope="col">
<span>JANUARY</span><br /><span
class="mt-2 text-muted text-uppercase d-block"
>(01)</span
>
</th>
<th scope="col">
<span>FEBRUARY</span><br /><span
class="mt-2 text-muted text-uppercase d-block"
>(02)</span
>
</th>
<th scope="col">
<span>MARCH</span><br /><span
class="mt-2 text-muted text-uppercase d-block"
>(03)</span
>
</th>
<th scope="col">
<span>APRIL</span><br /><span
class="mt-2 text-muted text-uppercase d-block"
>(04)</span
>
</th>
<th scope="col">
<span>MAY</span><br /><span
class="mt-2 text-muted text-uppercase d-block"
>(05)</span
>
</th>
<th scope="col">
<span>JUNE</span><br /><span
class="mt-2 text-muted text-uppercase d-block"
>(06)</span
>
</th>
<th scope="col">
<span>JULY</span><br /><span
class="mt-2 text-muted text-uppercase d-block"
>(07)</span
>
</th>
<th scope="col">
<span>AUGUST</span><br /><span
class="mt-2 text-muted text-uppercase d-block"
>(08)</span
>
</th>
<th scope="col">
<span>SEPTEMBER</span><br /><span
class="mt-2 text-muted text-uppercase d-block"
>(09)</span
>
</th>
<th scope="col">
<span>OCTOBER</span><br /><span
class="mt-2 text-muted text-uppercase d-block"
>(10)</span
>
</th>
<th scope="col">
<span>NOVEMBER</span><br /><span
class="mt-2 text-muted text-uppercase d-block"
>(11)</span
>
</th>
<th scope="col">
<span>DECEMBER</span><br /><span
class="mt-2 text-muted text-uppercase d-block"
>(12)</span
>
</th>
<th scope="col"><span>Row Total</span></th>
</tr>
</thead>
<tbody>
<tr class="table-group-divider" cy-data="count-row">
<th scope="row">
<span>NOT AT ALL</span> <span class="text-muted">(1)</span>
</th>
<td>N=17</td>
<td>24</td>
<td>25</td>
<td>21</td>
<td>19</td>
<td>16</td>
<td>26</td>
<td>16</td>
<td>28</td>
<td>25</td>
<td>25</td>
<td>31</td>
<td>273</td>
</tr>
<tr cy-data="row-percent-row">
<th scope="row">Row %</th>
<td class="text-end">6.23%</td>
<td class="text-end">8.79%</td>
<td class="text-end">9.16%</td>
<td class="text-end">7.69%</td>
<td class="text-end">6.96%</td>
<td class="text-end">5.86%</td>
<td class="text-end">9.52%</td>
<td class="text-end">5.86%</td>
<td class="text-end">10.26%</td>
<td class="text-end">9.16%</td>
<td class="text-end">9.16%</td>
<td class="text-end">11.36%</td>
<td class="text-end">100%</td>
</tr>
<tr cy-data="column-percent-row">
<th scope="row">Column %</th>
<td class="text-end">47.22%</td>
<td class="text-end">53.33%</td>
<td class="text-end">53.19%</td>
<td class="text-end">50.00%</td>
<td class="text-end">44.19%</td>
<td class="text-end">40.00%</td>
<td class="text-end">49.06%</td>
<td class="text-end">37.21%</td>
<td class="text-end">54.90%</td>
<td class="text-end">46.30%</td>
<td class="text-end">46.30%</td>
<td class="text-end">60.78%</td>
<td class="text-end">48.84%</td>
</tr>
<tr cy-data="total-percent-row">
<th scope="row">Total %</th>
<td class="text-end">3.04%</td>
<td class="text-end">4.29%</td>
<td class="text-end">4.47%</td>
<td class="text-end">3.76%</td>
<td class="text-end">3.40%</td>
<td class="text-end">2.86%</td>
<td class="text-end">4.65%</td>
<td class="text-end">2.86%</td>
<td class="text-end">5.01%</td>
<td class="text-end">4.47%</td>
<td class="text-end">4.47%</td>
<td class="text-end">5.55%</td>
<td class="text-end">48.84%</td>
</tr>
<tr class="table-group-divider" cy-data="count-row">
<th scope="row">
<span>ABOUT ONCE A YEAR</span> <span class="text-muted"
>(2)</span
>
</th>
<td>N=3</td>
<td>7</td>
<td>8</td>
<td>6</td>
<td>9</td>
<td>4</td>
<td>8</td>
<td>11</td>
<td>3</td>
<td>7</td>
<td>8</td>
<td>3</td>
<td>77</td>
</tr>
<tr cy-data="row-percent-row">
<th scope="row"></th>
<td class="text-end">3.90%</td>
<td class="text-end">9.09%</td>
<td class="text-end">10.39%</td>
<td class="text-end">7.79%</td>
<td class="text-end">11.69%</td>
<td class="text-end">5.19%</td>
<td class="text-end">10.39%</td>
<td class="text-end">14.29%</td>
<td class="text-end">3.90%</td>
<td class="text-end">9.09%</td>
<td class="text-end">10.39%</td>
<td class="text-end">3.90%</td>
<td class="text-end">100%</td>
</tr>
<tr cy-data="column-percent-row">
<th scope="row"></th>
<td class="text-end">8.33%</td>
<td class="text-end">15.56%</td>
<td class="text-end">17.02%</td>
<td class="text-end">14.29%</td>
<td class="text-end">20.93%</td>
<td class="text-end">10.00%</td>
<td class="text-end">15.09%</td>
<td class="text-end">25.58%</td>
<td class="text-end">5.88%</td>
<td class="text-end">12.96%</td>
<td class="text-end">14.81%</td>
<td class="text-end">5.88%</td>
<td class="text-end">13.77%</td>
</tr>
<tr cy-data="total-percent-row">
<th scope="row"></th>
<td class="text-end">0.54%</td>
<td class="text-end">1.25%</td>
<td class="text-end">1.43%</td>
<td class="text-end">1.07%</td>
<td class="text-end">1.61%</td>
<td class="text-end">0.72%</td>
<td class="text-end">1.43%</td>
<td class="text-end">1.97%</td>
<td class="text-end">0.54%</td>
<td class="text-end">1.25%</td>
<td class="text-end">1.43%</td>
<td class="text-end">0.54%</td>
<td class="text-end">13.77%</td>
</tr>
<tr class="table-group-divider" cy-data="count-row">
<th scope="row">
<span>SEVERAL TIMES A YEAR</span> <span class="text-muted"
>(3)</span
>
</th>
<td>N=3</td>
<td>8</td>
<td>8</td>
<td>5</td>
<td>7</td>
<td>7</td>
<td>7</td>
<td>6</td>
<td>5</td>
<td>11</td>
<td>8</td>
<td>5</td>
<td>80</td>
</tr>
<tr cy-data="row-percent-row">
<th scope="row"></th>
<td class="text-end">3.75%</td>
<td class="text-end">10.00%</td>
<td class="text-end">10.00%</td>
<td class="text-end">6.25%</td>
<td class="text-end">8.75%</td>
<td class="text-end">8.75%</td>
<td class="text-end">8.75%</td>
<td class="text-end">7.50%</td>
<td class="text-end">6.25%</td>
<td class="text-end">13.75%</td>
<td class="text-end">10.00%</td>
<td class="text-end">6.25%</td>
<td class="text-end">100%</td>
</tr>
<tr cy-data="column-percent-row">
<th scope="row"></th>
<td class="text-end">8.33%</td>
<td class="text-end">17.78%</td>
<td class="text-end">17.02%</td>
<td class="text-end">11.90%</td>
<td class="text-end">16.28%</td>
<td class="text-end">17.50%</td>
<td class="text-end">13.21%</td>
<td class="text-end">13.95%</td>
<td class="text-end">9.80%</td>
<td class="text-end">20.37%</td>
<td class="text-end">14.81%</td>
<td class="text-end">9.80%</td>
<td class="text-end">14.31%</td>
</tr>
<tr cy-data="total-percent-row">
<th scope="row"></th>
<td class="text-end">0.54%</td>
<td class="text-end">1.43%</td>
<td class="text-end">1.43%</td>
<td class="text-end">0.89%</td>
<td class="text-end">1.25%</td>
<td class="text-end">1.25%</td>
<td class="text-end">1.25%</td>
<td class="text-end">1.07%</td>
<td class="text-end">0.89%</td>
<td class="text-end">1.97%</td>
<td class="text-end">1.43%</td>
<td class="text-end">0.89%</td>
<td class="text-end">14.31%</td>
</tr>
<tr class="table-group-divider" cy-data="count-row">
<th scope="row">
<span>ONE TO THREE TIMES A MONTH</span> <span
class="text-muted"
>(4)</span
>
</th>
<td>N=5</td>
<td>1</td>
<td>0</td>
<td>3</td>
<td>2</td>
<td>4</td>
<td>5</td>
<td>3</td>
<td>0</td>
<td>2</td>
<td>2</td>
<td>0</td>
<td>27</td>
</tr>
<tr cy-data="row-percent-row">
<th scope="row"></th>
<td class="text-end">18.52%</td>
<td class="text-end">3.70%</td>
<td class="text-end">0.00%</td>
<td class="text-end">11.11%</td>
<td class="text-end">7.41%</td>
<td class="text-end">14.81%</td>
<td class="text-end">18.52%</td>
<td class="text-end">11.11%</td>
<td class="text-end">0.00%</td>
<td class="text-end">7.41%</td>
<td class="text-end">7.41%</td>
<td class="text-end">0.00%</td>
<td class="text-end">100%</td>
</tr>
<tr cy-data="column-percent-row">
<th scope="row"></th>
<td class="text-end">13.89%</td>
<td class="text-end">2.22%</td>
<td class="text-end">0.00%</td>
<td class="text-end">7.14%</td>
<td class="text-end">4.65%</td>
<td class="text-end">10.00%</td>
<td class="text-end">9.43%</td>
<td class="text-end">6.98%</td>
<td class="text-end">0.00%</td>
<td class="text-end">3.70%</td>
<td class="text-end">3.70%</td>
<td class="text-end">0.00%</td>
<td class="text-end">4.83%</td>
</tr>
<tr cy-data="total-percent-row">
<th scope="row"></th>
<td class="text-end">0.89%</td>
<td class="text-end">0.18%</td>
<td class="text-end">0.00%</td>
<td class="text-end">0.54%</td>
<td class="text-end">0.36%</td>
<td class="text-end">0.72%</td>
<td class="text-end">0.89%</td>
<td class="text-end">0.54%</td>
<td class="text-end">0.00%</td>
<td class="text-end">0.36%</td>
<td class="text-end">0.36%</td>
<td class="text-end">0.00%</td>
<td class="text-end">4.83%</td>
</tr>
<tr class="table-group-divider" cy-data="count-row">
<th scope="row">
<span>ABOUT ONCE A WEEK</span> <span class="text-muted"
>(5)</span
>
</th>
<td>N=1</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>3</td>
<td>0</td>
<td>1</td>
<td>2</td>
<td>0</td>
<td>1</td>
<td>3</td>
<td>11</td>
</tr>
<tr cy-data="row-percent-row">
<th scope="row"></th>
<td class="text-end">9.09%</td>
<td class="text-end">0.00%</td>
<td class="text-end">0.00%</td>
<td class="text-end">0.00%</td>
<td class="text-end">0.00%</td>
<td class="text-end">27.27%</td>
<td class="text-end">0.00%</td>
<td class="text-end">9.09%</td>
<td class="text-end">18.18%</td>
<td class="text-end">0.00%</td>
<td class="text-end">9.09%</td>
<td class="text-end">27.27%</td>
<td class="text-end">100%</td>
</tr>
<tr cy-data="column-percent-row">
<th scope="row"></th>
<td class="text-end">2.78%</td>
<td class="text-end">0.00%</td>
<td class="text-end">0.00%</td>
<td class="text-end">0.00%</td>
<td class="text-end">0.00%</td>
<td class="text-end">7.50%</td>
<td class="text-end">0.00%</td>
<td class="text-end">2.33%</td>
<td class="text-end">3.92%</td>
<td class="text-end">0.00%</td>
<td class="text-end">1.85%</td>
<td class="text-end">5.88%</td>
<td class="text-end">1.97%</td>
</tr>
<tr cy-data="total-percent-row">
<th scope="row"></th>
<td class="text-end">0.18%</td>
<td class="text-end">0.00%</td>
<td class="text-end">0.00%</td>
<td class="text-end">0.00%</td>
<td class="text-end">0.00%</td>
<td class="text-end">0.54%</td>
<td class="text-end">0.00%</td>
<td class="text-end">0.18%</td>
<td class="text-end">0.36%</td>
<td class="text-end">0.00%</td>
<td class="text-end">0.18%</td>
<td class="text-end">0.54%</td>
<td class="text-end">1.97%</td>
</tr>
<tr class="table-group-divider" cy-data="count-row">
<th scope="row">
<span>MORE THAN ONCE A WEEK</span> <span class="text-muted"
>(6)</span
>
</th>
<td>N=1</td>
<td>0</td>
<td>1</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>0</td>
<td>2</td>
<td>0</td>
<td>13</td>
</tr>
<tr cy-data="row-percent-row">
<th scope="row"></th>
<td class="text-end">7.69%</td>
<td class="text-end">0.00%</td>
<td class="text-end">7.69%</td>
<td class="text-end">15.38%</td>
<td class="text-end">15.38%</td>
<td class="text-end">15.38%</td>
<td class="text-end">7.69%</td>
<td class="text-end">7.69%</td>
<td class="text-end">7.69%</td>
<td class="text-end">0.00%</td>
<td class="text-end">15.38%</td>
<td class="text-end">0.00%</td>
<td class="text-end">100%</td>
</tr>
<tr cy-data="column-percent-row">
<th scope="row"></th>
<td class="text-end">2.78%</td>
<td class="text-end">0.00%</td>
<td class="text-end">2.13%</td>
<td class="text-end">4.76%</td>
<td class="text-end">4.65%</td>
<td class="text-end">5.00%</td>
<td class="text-end">1.89%</td>
<td class="text-end">2.33%</td>
<td class="text-end">1.96%</td>
<td class="text-end">0.00%</td>
<td class="text-end">3.70%</td>
<td class="text-end">0.00%</td>
<td class="text-end">2.33%</td>
</tr>
<tr cy-data="total-percent-row">
<th scope="row"></th>
<td class="text-end">0.18%</td>
<td class="text-end">0.00%</td>
<td class="text-end">0.18%</td>
<td class="text-end">0.36%</td>
<td class="text-end">0.36%</td>
<td class="text-end">0.36%</td>
<td class="text-end">0.18%</td>
<td class="text-end">0.18%</td>
<td class="text-end">0.18%</td>
<td class="text-end">0.00%</td>
<td class="text-end">0.36%</td>
<td class="text-end">0.00%</td>
<td class="text-end">2.33%</td>
</tr>
<tr class="table-group-divider" cy-data="count-row">
<th scope="row">
<span>R SAYS FORMER SPOUSES/PARTNERS PARENTS ARE DECEASED</span
> <span class="text-muted">(9)</span>
</th>
<td>N=6</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>4</td>
<td>4</td>
<td>6</td>
<td>5</td>
<td>12</td>
<td>9</td>
<td>8</td>
<td>9</td>
<td>78</td>
</tr>
<tr cy-data="row-percent-row">
<th scope="row"></th>
<td class="text-end">7.69%</td>
<td class="text-end">6.41%</td>
<td class="text-end">6.41%</td>
<td class="text-end">6.41%</td>
<td class="text-end">5.13%</td>
<td class="text-end">5.13%</td>
<td class="text-end">7.69%</td>
<td class="text-end">6.41%</td>
<td class="text-end">15.38%</td>
<td class="text-end">11.54%</td>
<td class="text-end">10.26%</td>
<td class="text-end">11.54%</td>
<td class="text-end">100%</td>
</tr>
<tr cy-data="column-percent-row">
<th scope="row"></th>
<td class="text-end">16.67%</td>
<td class="text-end">11.11%</td>
<td class="text-end">10.64%</td>
<td class="text-end">11.90%</td>
<td class="text-end">9.30%</td>
<td class="text-end">10.00%</td>
<td class="text-end">11.32%</td>
<td class="text-end">11.63%</td>
<td class="text-end">23.53%</td>
<td class="text-end">16.67%</td>
<td class="text-end">14.81%</td>
<td class="text-end">17.65%</td>
<td class="text-end">13.95%</td>
</tr>
<tr cy-data="total-percent-row">
<th scope="row"></th>
<td class="text-end">1.07%</td>
<td class="text-end">0.89%</td>
<td class="text-end">0.89%</td>
<td class="text-end">0.89%</td>
<td class="text-end">0.72%</td>
<td class="text-end">0.72%</td>
<td class="text-end">1.07%</td>
<td class="text-end">0.89%</td>
<td class="text-end">2.15%</td>
<td class="text-end">1.61%</td>
<td class="text-end">1.43%</td>
<td class="text-end">1.61%</td>
<td class="text-end">13.95%</td>
</tr>
<tr class="table-group-divider" cy-data="count-row">
<th scope="row"><span>Col Total</span> </th>
<td>N=36</td>
<td>45</td>
<td>47</td>
<td>42</td>
<td>43</td>
<td>40</td>
<td>53</td>
<td>43</td>
<td>51</td>
<td>54</td>
<td>54</td>
<td>51</td>
<td>559</td>
</tr>
<tr cy-data="row-percent-row">
<th scope="row"></th>
<td class="text-end">6.44%</td>
<td class="text-end">8.05%</td>
<td class="text-end">8.41%</td>
<td class="text-end">7.51%</td>
<td class="text-end">7.69%</td>
<td class="text-end">7.16%</td>
<td class="text-end">9.48%</td>
<td class="text-end">7.69%</td>
<td class="text-end">9.12%</td>
<td class="text-end">9.66%</td>
<td class="text-end">9.66%</td>
<td class="text-end">9.12%</td>
<td class="text-end">100%</td>
</tr>
<tr cy-data="column-percent-row">
<th scope="row"></th>
<td class="text-end">100%</td>
<td class="text-end">100%</td>
<td class="text-end">100%</td>
<td class="text-end">100%</td>
<td class="text-end">100%</td>
<td class="text-end">100%</td>
<td class="text-end">100%</td>
<td class="text-end">100%</td>
<td class="text-end">100%</td>
<td class="text-end">100%</td>
<td class="text-end">100%</td>
<td class="text-end">100%</td>
<td class="text-end">100%</td>
</tr>
<tr cy-data="total-percent-row">
<th scope="row"></th>
<td class="text-end">6.44%</td>
<td class="text-end">8.05%</td>
<td class="text-end">8.41%</td>
<td class="text-end">7.51%</td>
<td class="text-end">7.69%</td>
<td class="text-end">7.16%</td>
<td class="text-end">9.48%</td>
<td class="text-end">7.69%</td>
<td class="text-end">9.12%</td>
<td class="text-end">9.66%</td>
<td class="text-end">9.66%</td>
<td class="text-end">9.12%</td>
<td class="text-end">100%</td>
</tr>
</tbody>
</table>
</div>
</figure>
`
}Modifying row borders
It may be desireable to indicate relationships between row values. Add class .table-group-divider to any row (<tr>
| Metric | Value |
|---|---|
| N Valid | 633 |
| N Missing | 0 |
| Min | 3.00 |
| Max | 35 |
| Mode | 18.00 |
| Median | 19.00 |
| Mean | 19.86 |
| Std. Deviation | 4.17 |
<figure>
<figcaption>Caption: Table Summary</figcaption>
<div class="table-responsive border border-dark mt-2">
<table class="table table-light table-bordered mb-0" tabindex="0">
<thead>
<tr>
<th scope="col">
<span>Metric</span>
</th>
<th scope="col">Value</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">N Valid</td>
<td>633</td>
</tr>
<tr class="table-group-divider">
<td scope="row">N Missing</td>
<td>0</td>
</tr>
<tr>
<td scope="row">Min</td>
<td>3.00</td>
</tr>
<tr class="table-group-divider">
<td scope="row">Max</td>
<td>35</td>
</tr>
<tr>
<td scope="row">Mode</td>
<td>18.00</td>
</tr>
<tr>
<td scope="row">Median</td>
<td>19.00</td>
</tr>
<tr>
<td scope="row">Mean</td>
<td>19.86</td>
</tr>
<tr>
<td scope="row">Std. Deviation</td>
<td>4.17</td>
</tr>
</tbody>
</table>
</div>
</figure>Hoverable Rows
You can add a hover background effect to rows by adding the .table-hover class to your table element.
|
Index of the item from API and this is a very very long title
for a very very small space
|
Name
|
Last
|
Favorite Pizza Topping
|
|---|---|---|---|
| 1 | Mark | Otto | Pepperoni |
| 2 | Jacob | tdornton | Pineapple |
| 3 | Larry | Bird | Basil |
<figure>
<figcaption>Table with hover effect on cells</figcaption>
<div class="table-responsive border border-dark mt-2">
<table
class="table table-hover table-bordered table-light mb-0"
tabindex="0">
<thead>
<tr>
<th scope="col">
<div class="d-flex w-100">
<span class="js-tbl-trunc"
>Index of the item from API and this is a very very long title
for a very very small space</span
>
</div>
</th>
<th scope="col">
<div class="d-flex w-100">
<span>Name</span>
</div>
</th>
<th scope="col">
<div class="d-flex w-100">
<span>Last</span>
</div>
</th>
<th scope="col">
<div class="d-flex w-100">
<span class="js-tbl-trunc">Favorite Pizza Topping</span>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">1</td>
<td>Mark</td>
<td>Otto</td>
<td>Pepperoni</td>
</tr>
<tr>
<td scope="row">2</td>
<td>Jacob</td>
<td>tdornton</td>
<td>Pineapple</td>
</tr>
<tr>
<td scope="row">3</td>
<td>Larry</td>
<td>Bird</td>
<td>Basil</td>
</tr>
</tbody>
</table>
</div>
</figure>Compact Tables
For tables inside other elements that don't have a lot of space, you can use .table-sm to remove some padding from table cells.
|
Index
|
Given
|
Last
|
Favorite Pizza Topping
|
|---|---|---|---|
| 1 | Mark | Otto | Pepperoni |
| 2 | Jacob | tdornton | Pineapple |
| 3 | Larry | Bird | Basil |
<figure>
<figcaption>Compact Table</figcaption>
<div class="table-responsive border border-dark mt-2">
<table class="table table-sm table-light table-bordered mb-0" tabindex="0">
<thead>
<tr>
<th scope="col">
<div class="d-flex w-100">
<span class="js-tbl-trunc">Index</span>
</div>
</th>
<th scope="col">
<div class="d-flex w-100">
<span class="js-tbl-trunc">Given</span>
</div>
</th>
<th scope="col">
<div class="d-flex w-100">
<span>Last</span>
</div>
</th>
<th scope="col">
<div class="d-flex w-100">
<span class="js-tbl-trunc">Favorite Pizza Topping</span>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">1</td>
<td>Mark</td>
<td>Otto</td>
<td>Pepperoni</td>
</tr>
<tr>
<td scope="row">2</td>
<td>Jacob</td>
<td>tdornton</td>
<td>Pineapple</td>
</tr>
<tr>
<td scope="row">3</td>
<td>Larry</td>
<td>Bird</td>
<td>Basil</td>
</tr>
</tbody>
</table>
</div>
</figure>No vertical lines
To remove vertical lines from a table use the class .table-v-lines-none and remove the .table-bordered class.
|
Status message: 'Verified'
Index of the item from API
|
Status message: 'Verified'
Given First LongnameOver30Characters
|
Last
|
Handle | Description | |
|---|---|---|---|---|---|
| 1 | Mark has a really really really long name | Otto | @mdo | [email protected] | Sometimes you just need a little more text to test things out. |
| 2 | Jacob | tdornton | @fat | [email protected] | Sometimes you just need a little more text to test things out. |
| 3 | Larry | Bird | [email protected] | Sometimes you just need a little more text to test things out. | |
| 4 | Jacob | tdornton | @fat | [email protected] | Sometimes you just need a little more text to test things out. |
| 5 | Jacob | tdornton | @fat | [email protected] | Sometimes you just need a little more text to test things out. |
| 6 | Jacob | tdornton | @fat | [email protected] | Sometimes you just need a little more text to test things out. |
| 7 | Jacob | tdornton | @fat | [email protected] | Sometimes you just need a little more text to test things out. |
| 8 | Jacob | tdornton | @fat | [email protected] | Sometimes you just need a little more text to test things out. |
| 9 | Jacob | tdornton | @fat | [email protected] | Sometimes you just need a little more text to test things out. |
| 10 | Jacob | tdornton | @fat | [email protected] | Sometimes you just need a little more text to test things out. |
| 11 | Jacob | tdornton | @fat | [email protected] | Sometimes you just need a little more text to test things out. |
| 12 | Jacob | tdornton | @fat | [email protected] | Sometimes you just need a little more text to test things out. |
| 13 | Jacob | tdornton | @fat | [email protected] | Sometimes you just need a little more text to test things out. |
<figure>
<figcaption>Caption: Large Table Summary</figcaption>
<div class="table-responsive mt-2">
<table class="table table-v-lines-none table-light mb-0" tabindex="0">
<thead>
<tr>
<th scope="col">
<div class="d-flex w-100">
<i class="fa-solid fa-circle-check me-3"></i>
<span class="visually-hidden">Status message: 'Verified'</span>
<span class="js-tbl-trunc">Index of the item from API</span>
<button class="btn btn-icon sort">
<i class="fa-solid fa-arrow-down-arrow-up"></i
><span class="visually-hidden">Sort column</span>
</button>
</div>
</th>
<th scope="col">
<div class="d-flex w-100">
<i class="fa-solid fa-circle-check me-3"></i>
<span class="visually-hidden">Status message: 'Verified'</span>
<span class="js-tbl-trunc"
><a href="https://www.cnn.com/"
>Given First LongnameOver30Characters</a
>
</span>
<button class="btn btn-icon sort">
<i class="fa-solid fa-arrow-down-arrow-up"></i
><span class="visually-hidden">Sort column</span>
</button>
</div>
</th>
<th scope="col">
<div class="d-flex w-100">
<span class="js-tbl-trunc">Last</span>
<button
class="btn btn-icon dropdown-toggle"
data-bs-toggle="dropdown"
type="button"
aria-expanded="false">
<i class="fas fa-ellipsis-v"></i>
<span class="visually-hidden">Column Options</span>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">Action</a>
</li>
<li>
<a class="dropdown-item" href="#">Another action</a>
</li>
<li>
<a class="dropdown-item" href="#">Something else here</a>
</li>
</ul>
</button>
</div>
</th>
<th scope="col"><span class="js-tbl-trunc">Handle</span></th>
<th scope="col"><span class="js-tbl-trunc">Email</span></th>
<th scope="col"><span class="js-tbl-trunc">Description</span></th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">1</td>
<td>Mark has a really really really long name</td>
<td>Otto</td>
<td>@mdo</td>
<td>[email protected]</td>
<td>
Sometimes you just need a little more text to test things out.
</td>
</tr>
<tr>
<td scope="row">2</td>
<td>Jacob</td>
<td>tdornton</td>
<td>@fat</td>
<td>[email protected]</td>
<td>
Sometimes you just need a little more text to test things out.
</td>
</tr>
<tr>
<td scope="row">3</td>
<td>Larry</td>
<td>Bird</td>
<td>@twitter</td>
<td>[email protected]</td>
<td>
Sometimes you just need a little more text to test things out.
</td>
</tr>
<tr>
<td scope="row">4</td>
<td>Jacob</td>
<td>tdornton</td>
<td>@fat</td>
<td>[email protected]</td>
<td>
Sometimes you just need a little more text to test things out.
</td>
</tr>
<tr>
<td scope="row">5</td>
<td>Jacob</td>
<td>tdornton</td>
<td>@fat</td>
<td>[email protected]</td>
<td>
Sometimes you just need a little more text to test things out.
</td>
</tr>
<tr>
<td scope="row">6</td>
<td>Jacob</td>
<td>tdornton</td>
<td>@fat</td>
<td>[email protected]</td>
<td>
Sometimes you just need a little more text to test things out.
</td>
</tr>
<tr>
<td scope="row">7</td>
<td>Jacob</td>
<td>tdornton</td>
<td>@fat</td>
<td>[email protected]</td>
<td>
Sometimes you just need a little more text to test things out.
</td>
</tr>
<tr>
<td scope="row">8</td>
<td>Jacob</td>
<td>tdornton</td>
<td>@fat</td>
<td>[email protected]</td>
<td>
Sometimes you just need a little more text to test things out.
</td>
</tr>
<tr>
<td scope="row">9</td>
<td>Jacob</td>
<td>tdornton</td>
<td>@fat</td>
<td>[email protected]</td>
<td>
Sometimes you just need a little more text to test things out.
</td>
</tr>
<tr>
<td scope="row">10</td>
<td>Jacob</td>
<td>tdornton</td>
<td>@fat</td>
<td>[email protected]</td>
<td>
Sometimes you just need a little more text to test things out.
</td>
</tr>
<tr>
<td scope="row">11</td>
<td>Jacob</td>
<td>tdornton</td>
<td>@fat</td>
<td>[email protected]</td>
<td>
Sometimes you just need a little more text to test things out.
</td>
</tr>
<tr>
<td scope="row">12</td>
<td>Jacob</td>
<td>tdornton</td>
<td>@fat</td>
<td>[email protected]</td>
<td>
Sometimes you just need a little more text to test things out.
</td>
</tr>
<tr>
<td scope="row">13</td>
<td>Jacob</td>
<td>tdornton</td>
<td>@fat</td>
<td>[email protected]</td>
<td>
Sometimes you just need a little more text to test things out.
</td>
</tr>
</tbody>
</table>
</div>
</figure>
<nav class="d-flex justify-content-end" aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link">Previous</a>
</li>
<li class="page-item active" aria-current="page">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item">
<a class="page-link" href="#">3</a>
</li>
<li class="page-item">
<a class="page-link" href="#">4</a>
</li>
<li class="page-item">
<a class="page-link" href="#">5</a>
</li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>Sorting Data
Icons to use for Sorting Notifications:
Default:<i class="fa-solid fa-arrow-down-arrow-up"></i><i class="fa-solid fa-arrow-up"><i class="fa-solid fa-arrow-down"></i>Expected Functionality of Sorting Icons:
By default every column is in the survey order (default icon) and when the sort button is clicked, it changes to ascending first and then to descending when clicked. It toggles between ascending and descending whenever the sort button is clicked on.
Handling Scroll indication
Tables require a visual to indicate that there is more content to scroll to. Some JS has been provided to add and remove gradient indicators when necessary. You will have to modify it for use in modern front-end frameworks like React.js.
//*** Over flow gradient JS **//
// this is the onload handler for non-tab pages
document.addEventListener("DOMContentLoaded", function (e) {
loopTheTables();
});
//this is the onload handler for tab pages (like the code library)
const tabEl = document.querySelector('button#ui-comp-tables-tab')
tabEl.addEventListener('shown.bs.tab', event => {
loopTheTables()
})
let nodeList = document.querySelectorAll(".table-container");
// On window resize call setOverflowIndication for each element in nodelist.
["resize"].forEach(evt => {
window.addEventListener(evt, () => {
nodeList.forEach(e => {
setOverflowIndication(e);
})
}, true);
})
function loopTheTables(){
// create a nodelist of all the table containers
let nodeList = document.querySelectorAll(".table-container");
nodeList.forEach(e => {
setOverflowIndication(e);
})
}
function setOverflowIndication(e) {
if (!e) {
e = document.querySelectorAll(".table-container");
}
// compare width and height of elements.
//If scroll distance is greater than the width of element return "true" (overflow present).
var overflowX = e.clientWidth < e.scrollWidth;
var overflowY = e.clientHeight < e.scrollHeight;
overflowX ? e.classList.add('indicator-x') : e.classList.remove('indicator-x');
overflowY ? e.classList.add('indicator-y') : e.classList.remove('indicator-y');;
}
Handling Long Table Headings
To help keep a uniform look and not have table heading names cause the table to take up a lot of room we are adding some JavaScript to truncate the text and add a tool tip. If the table heading is already a link where it will take the user to a page or modal where the full table heading title will be shown there is no need to add the tooltip just truncate. You will have to modify it for use in modern front-end frameworks like React.js.
Tooltip will not show up in the code library it will only appear on pages
that have fully loaded bootstrap
//*** Truncating Very Long Table Headings JS **//
// this is the onload handler for non-tab pages
document.addEventListener("DOMContentLoaded", function (e) {
loopTheTables();
});
function loopTheTables(){
// create a list of all the table headings to be checked for length
let text = document.querySelectorAll('.js-tbl-trunc');
text.forEach(e => {
e.replaceWith( truncate(e) );
})
function truncate(e) {
let tblHead = e;
let innerText = e.textContent;
let stringNumb = innerText.toString().length;
let textLimit = 30;
let tText = innerText.substring(0, textLimit) + ' ...';
// if the table header has a tag and is over the text limit return the a original tag and truncated text
if (stringNumb > textLimit && tblHead.querySelector('button')) {
let doesAnchor = tblHead.getElementsByTagName('button');
let truncatedText = doesAnchor[0].innerText.substring(0, textLimit) + ' ...';
// element that will be wrapped
let newStuff = doesAnchor[0];
newStuff.innerHTML = truncatedText;
// create wrapper container
let wrapper = document.createElement('span');
// insert wrapper before newStuff in the DOM tree
newStuff.parentNode.insertBefore(wrapper, newStuff);
// move newStuff into wrapper
wrapper.appendChild(newStuff);
return wrapper;
} else if (stringNumb > textLimit) {
// if there is no a tag and the table heading is over the limit create a tag tooltip with full text inside tooltip
let newWrapper = document.createElement('span');
let newSpan = document.createElement('button');
newSpan.setAttribute('data-bs-toggle', 'tooltip');
newSpan.setAttribute('data-bs-title', innerText);
newSpan.classList.add('btn btn-link', 'p-0', 'text-start', 'fw-bold');
newSpan.innerHTML = tText;
newWrapper.appendChild(newSpan);
return newWrapper;
} else {
// just return what was there
return e;
}
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
const tooltipList = [...tooltipTriggerList].map(
(tooltipTriggerEl) => new bootstrap.Tooltip(tooltipTriggerEl)
);
}