.table-responsive and .table-responsive-{sm|md|lg|xl} should be placed in a div that wraps the table element. See https://github.com/twbs/bootstrap/issues/24638 for more info.
The
show-quick-actions-on-hover class requires JavaScript to add the table-focus class to the table row when an item inside is focused. This makes it keyboard accessible.
Table List
| ID | Title | Status | Modified Date | Display Date | Author | Type | ||
|---|---|---|---|---|---|---|---|---|
| Group 1 | ||||||||
|
|
21146 |
.table-list-title (not a link)
Some regular text
|
-- | 2 Hours Ago | -- | Stanley Nelson | Folder | |
|
|
21148 | -- | 2 Hours Ago | -- | Stanley Nelson | Folder | ||
|
|
21149 |
Cultivar extra
|
-- | 2 Hours Ago | -- | Stanley Nelson | Folder | |
|
|
21150 |
Cultivar extra
|
-- | 2 Hours Ago | -- | Stanley Nelson | Folder | |
Table List with Table Striped
| Description | Format | Label | Label | ||
|---|---|---|---|---|---|
|
|
Wings eu, pumpkin spice robusta, kopi-luwak mocha caffeine froth grounds.
|
jpg | jpg | jpg | |
|
|
Pumpkin spice and, java sit whipped grinder steamed.
|
jpg | jpg | jpg | |
|
|
Frappuccino medium americano
|
jpg | jpg | jpg | |
|
|
Cultivar extra
|
jpg | jpg | jpg |
<div class="table-responsive-sm">
<table class="show-quick-actions-on-hover table table-autofit table-list table-striped">
<thead>
<tr>
<th></th>
<th class="table-cell-expand">
<span class="text-truncate-inline">
<span class="text-truncate" title="Description">Description</span>
</span>
</th>
<th>Format</th>
<th>Label</th>
<th>Label</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="custom-control custom-checkbox">
<label>
<input class="custom-control-input" type="checkbox" />
<span class="custom-control-label"></span>
</label>
</div>
</td>
<td class="table-cell-expand">
<div class="table-list-title">
<span class="text-truncate-inline">
<span class="text-truncate" title="Wings eu, pumpkin spice robusta, kopi-luwak mocha caffeine froth grounds.">Wings eu, pumpkin spice robusta, kopi-luwak mocha caffeine froth grounds.</span>
</span>
</div>
</td>
<td><a href="#1">jpg</a></td>
<td><a href="#1">jpg</a></td>
<td><a href="#1">jpg</a></td>
<td>
<div class="quick-action-menu">
<a class="component-action quick-action-item" href="#1" role="button">
<svg class="lexicon-icon lexicon-icon-trash" focusable="false" role="presentation">
<use href="/images/icons/icons.svg#trash" />
</svg>
</a>
<a class="component-action quick-action-item" href="#1" role="button">
<svg class="lexicon-icon lexicon-icon-download" focusable="false" role="presentation">
<use href="/images/icons/icons.svg#download" />
</svg>
</a>
<a class="component-action quick-action-item" href="#1" role="button">
<svg class="lexicon-icon lexicon-icon-expand" focusable="false" role="presentation">
<use href="/images/icons/icons.svg#expand" />
</svg>
</a>
</div>
<div class="dropdown dropdown-action">
<a aria-expanded="false" aria-haspopup="true" class="component-action dropdown-toggle" data-toggle="dropdown" href="#1" id="dropdownAction1" role="button">
<svg class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false" role="presentation">
<use href="/images/icons/icons.svg#ellipsis-v" />
</svg>
</a>
<ul aria-labelledby="" class="dropdown-menu dropdown-menu-right">
<li><a class="dropdown-item" href="#1" role="button">Remove</a></li>
<li><a class="dropdown-item" href="#1" role="button">Download</a></li>
<li><a class="dropdown-item" href="#1" role="button">Checkout</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class="custom-control custom-checkbox">
<label>
<input class="custom-control-input" type="checkbox" />
<span class="custom-control-label"></span>
</label>
</div>
</td>
<td class="table-cell-expand">
<div class="table-list-title">
<span class="text-truncate-inline">
<span class="text-truncate" title="Pumpkin spice and, java sit whipped grinder steamed.">Pumpkin spice and, java sit whipped grinder steamed.</span>
</span>
</div>
</td>
<td><a href="#1">jpg</a></td>
<td><a href="#1">jpg</a></td>
<td><a href="#1">jpg</a></td>
<td>
<div class="quick-action-menu">
<a class="component-action quick-action-item" href="#1" role="button">
<svg class="lexicon-icon lexicon-icon-trash" focusable="false" role="presentation">
<use href="/images/icons/icons.svg#trash" />
</svg>
</a>
<a class="component-action quick-action-item" href="#1" role="button">
<svg class="lexicon-icon lexicon-icon-download" focusable="false" role="presentation">
<use href="/images/icons/icons.svg#download" />
</svg>
</a>
<a class="component-action quick-action-item" href="#1" role="button">
<svg class="lexicon-icon lexicon-icon-expand" focusable="false" role="presentation">
<use href="/images/icons/icons.svg#expand" />
</svg>
</a>
</div>
<div class="dropdown dropdown-action">
<a aria-expanded="false" aria-haspopup="true" class="component-action dropdown-toggle" data-toggle="dropdown" href="#1" id="dropdownAction1" role="button">
<svg class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false" role="presentation">
<use href="/images/icons/icons.svg#ellipsis-v" />
</svg>
</a>
<ul aria-labelledby="" class="dropdown-menu dropdown-menu-right">
<li><a class="dropdown-item" href="#1" role="button">Remove</a></li>
<li><a class="dropdown-item" href="#1" role="button">Download</a></li>
<li><a class="dropdown-item" href="#1" role="button">Checkout</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class="custom-control custom-checkbox">
<label>
<input class="custom-control-input" type="checkbox" />
<span class="custom-control-label"></span>
</label>
</div>
</td>
<td class="table-cell-expand">
<div class="table-list-title">
<span class="text-truncate-inline">
<span class="text-truncate" title="Frappuccino medium americano">Frappuccino medium americano</span>
</span>
</div>
</td>
<td><a href="#1">jpg</a></td>
<td><a href="#1">jpg</a></td>
<td><a href="#1">jpg</a></td>
<td>
<div class="quick-action-menu">
<a class="component-action quick-action-item" href="#1" role="button">
<svg class="lexicon-icon lexicon-icon-trash" focusable="false" role="presentation">
<use href="/images/icons/icons.svg#trash" />
</svg>
</a>
<a class="component-action quick-action-item" href="#1" role="button">
<svg class="lexicon-icon lexicon-icon-download" focusable="false" role="presentation">
<use href="/images/icons/icons.svg#download" />
</svg>
</a>
<a class="component-action quick-action-item" href="#1" role="button">
<svg class="lexicon-icon lexicon-icon-expand" focusable="false" role="presentation">
<use href="/images/icons/icons.svg#expand" />
</svg>
</a>
</div>
<div class="dropdown dropdown-action">
<a aria-expanded="false" aria-haspopup="true" class="component-action dropdown-toggle" data-toggle="dropdown" href="#1" id="dropdownAction1" role="button">
<svg class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false" role="presentation">
<use href="/images/icons/icons.svg#ellipsis-v" />
</svg>
</a>
<ul aria-labelledby="" class="dropdown-menu dropdown-menu-right">
<li><a class="dropdown-item" href="#1" role="button">Remove</a></li>
<li><a class="dropdown-item" href="#1" role="button">Download</a></li>
<li><a class="dropdown-item" href="#1" role="button">Checkout</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class="custom-control custom-checkbox">
<label>
<input class="custom-control-input" type="checkbox" />
<span class="custom-control-label"></span>
</label>
</div>
</td>
<td class="table-cell-expand">
<div class="table-list-title">
<span class="text-truncate-inline">
<span class="text-truncate" title="Cultivar extra">Cultivar extra</span>
</span>
</div>
</td>
<td><a href="#1">jpg</a></td>
<td><a href="#1">jpg</a></td>
<td><a href="#1">jpg</a></td>
<td>
<div class="quick-action-menu">
<a class="component-action quick-action-item" href="#1" role="button">
<svg class="lexicon-icon lexicon-icon-trash" focusable="false" role="presentation">
<use href="/images/icons/icons.svg#trash" />
</svg>
</a>
<a class="component-action quick-action-item" href="#1" role="button">
<svg class="lexicon-icon lexicon-icon-download" focusable="false" role="presentation">
<use href="/images/icons/icons.svg#download" />
</svg>
</a>
<a class="component-action quick-action-item" href="#1" role="button">
<svg class="lexicon-icon lexicon-icon-expand" focusable="false" role="presentation">
<use href="/images/icons/icons.svg#expand" />
</svg>
</a>
</div>
<div class="dropdown dropdown-action">
<a aria-expanded="false" aria-haspopup="true" class="component-action dropdown-toggle" data-toggle="dropdown" href="#1" id="dropdownAction1" role="button">
<svg class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false" role="presentation">
<use href="/images/icons/icons.svg#ellipsis-v" />
</svg>
</a>
<ul aria-labelledby="" class="dropdown-menu dropdown-menu-right">
<li><a class="dropdown-item" href="#1" role="button">Remove</a></li>
<li><a class="dropdown-item" href="#1" role="button">Download</a></li>
<li><a class="dropdown-item" href="#1" role="button">Checkout</a></li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>Table List with Table Hover
| Description | Format | Label | Label | ||
|---|---|---|---|---|---|
|
|
Wings eu, pumpkin spice robusta, kopi-luwak mocha caffeine froth grounds.
|
jpg | jpg | jpg | |
|
|
Pumpkin spice and, java sit whipped grinder steamed.
|
jpg | jpg | jpg | |
|
|
Frappuccino medium americano
|
jpg | jpg | jpg | |
|
|
Cultivar extra
|
jpg | jpg | jpg |
<div class="table-responsive-sm">
<table class="show-quick-actions-on-hover table table-autofit table-hover table-list">
</table>
</div>Table List with Table Bordered
| Description | Format | Label | Label | ||
|---|---|---|---|---|---|
|
|
Wings eu, pumpkin spice robusta, kopi-luwak mocha caffeine froth grounds.
|
jpg | jpg | jpg | |
|
|
Pumpkin spice and, java sit whipped grinder steamed.
|
jpg | jpg | jpg | |
|
|
Frappuccino medium americano
|
jpg | jpg | jpg | |
|
|
Cultivar extra
|
jpg | jpg | jpg |
<div class="table-responsive-sm">
<table class="show-quick-actions-on-hover table table-autofit table-bordered table-list">
</table>
</div>Table Helpers
The table-autofit class constrains table columns to be the same width as its content, but it must be used with the table-cell-expand class. The table-cell-expand class fills the remaining space.
Use the table-cell-expand-small, table-cell-expand-smaller, or table-cell-expand-smallest class with the table-cell-expand class to size columns smaller relative to the widest column.
Use the table-cell-minw-50, table-cell-minw-75, table-cell-minw-100, table-cell-minw-150, table-cell-minw-200, table-cell-minw-250, table-cell-minw-300, table-cell-minw-350, and table-cell-minw-400 utility classes to set the table cell's min-width to 50px, 75px, 100px, 150px, 200px, 250px, 300px, 350px, and 400px on a specific table column, respectively.
The table-cell-ws-normal and table-cell-ws-nowrap helper classes set the white-space to normal or nowrap on a specific table column, respectively.
| ID | Title | Modified Date | Display Date | Author | Type | |
|---|---|---|---|---|---|---|
|
|
21146 |
Wings eu, pumpkin spice robusta, kopi-luwak mocha caffeine froth grounds.
|
2 Hours Ago | -- | Stanley Nelson | Folder |
<div class="table-responsive">
<table class="table table-autofit">
</table>
</div>The table-heading-nowrap class keeps headings on one line.
| ID | Title | Status | Modified Date | Display Date | Author | Type | |
|---|---|---|---|---|---|---|---|
|
|
21146 |
Wings eu, pumpkin spice robusta, kopi-luwak mocha caffeine froth grounds.
|
-- | 2 Hours Ago | -- | Stanley Nelson | Folder |
<div class="table-responsive">
<table class="table table-autofit table-heading-nowrap">
</table>
</div>The table-nowrap class keeps everything on one line.
| ID | Title | Status | Modified Date | Display Date | Author | Type | |
|---|---|---|---|---|---|---|---|
|
|
21146 |
Wings eu, pumpkin spice robusta, kopi-luwak mocha caffeine froth grounds.
|
-- | 2 Hours Ago | -- | Stanley Nelson | Folder |
<div class="table-responsive">
<table class="table table-autofit table-nowrap">
</table>
</div>Vertical Alignment
We have added some classes to help vertically align contents inside a table. Use the table-valign-bottom, table-valign-middle, and table-valign-top classes on <table> to vertically align table cell contents on the bottom, middle, and top, respectively.
Use the thead-valign-bottom, thead-valign-middle, and thead-valign-top classes on <table> to vertically align the contents inside the table head.
Use the tbody-valign-bottom, tbody-valign-middle, and tbody-valign-top classes on <table> to vertically align the contents inside the table body.
Table Column Text-{start|center|end}
We have added some classes to help horizontally align contents inside a table column. The table-column-text-start, table-column-text-center, and table-column-text-end classes align text left, center, and right, respectively.
Table Cell-{start|end}
Sometimes we are unable to remove specific table columns from the DOM and need to hide it using CSS. The classes table-cell-start and table-cell-end can be added to the "new" first or last column to maintain table styles on the left and right side.
| Title | Status | Items | Start Date | Duration | |||
|---|---|---|---|---|---|---|---|
| In Progress | |||||||
|
|
MT
|
100,000 | 2017.11.24 - 17:15 | 4 minutes |
30%
|
||
<div class="table-responsive">
<table class="show-quick-actions-on-hover table table-autofit table-nowrap table-list">
<thead>
<tr>
<th class="d-none"></th>
<th class="table-cell-start"></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th class="table-cell-end"></th>
<th class="d-none"></th>
</tr>
</thead>
<tbody>
<tr class="table-divider"></tr>
<tr>
<td class="d-none"></td>
<td class="table-cell-start"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="table-cell-end"></td>
<td class="d-none"></td>
</tr>
</tbody>
</table>
</div>Table Row-{start|end}
The same is true for table rows, the classes table-row-start and table-row-end can be added to the "new" first or last <tr> to maintain table styles on the top and bottom sides.
| Title | Status | Items | Start Date | Duration | |||
|---|---|---|---|---|---|---|---|
| In Progress | |||||||
|
|
MT
|
100,000 | 2017.11.24 - 17:15 | 4 minutes |
30%
|
||
<div class="table-responsive">
<table class="show-quick-actions-on-hover table table-autofit table-nowrap table-list">
<thead>
<tr class="d-none">
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr class="table-row-start">
<th class="d-none"></th>
<th class="table-cell-start"></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th class="table-cell-end"></th>
<th class="d-none"></th>
</tr>
</thead>
<tbody>
<tr class="table-divider"></tr>
<tr class="table-row-end">
<td class="d-none"></td>
<td class="table-cell-start"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="table-cell-end"></td>
<td class="d-none"></td>
</tr>
<tr class="d-none">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>Table
Because of the dynamic nature of content in tables, we left it to the developer to size and align columns inside tables. Add a unique class to each column and min-width / max-width to space the tables to your specific requirements.
| Name | Roles | Remove |
|---|---|---|
|
.table-title (not a link)
Some regular text
|
.table-link, link, (.table-action-link), and some regular text | |
| Liferay Site Owner | ||
| Liferay Site Owner | ||
| Liferay Site Owner |
<div class="table-responsive">
<table class="table table-autofit">
<thead>
<tr>
<th class="table-cell-expand">Name</th>
<th class="table-cell-expand">Roles</th>
<th class="table-column-text-center">Remove</th>
</tr>
</thead>
<tbody>
<tr>
<td class="table-cell-expand">
<div class="table-title">.table-title (not a link)</div>
<div class="table-title">
<a class="text-truncate-inline" href="#1">
<span class="text-truncate">.table-title a</span>
</a>
</div>
<div>Some regular text</div>
</td>
<td class="table-cell-expand">
<a class="table-link" href="#1">.table-link</a>,
<a href="#1">link</a>,
<a class="table-action-link" href="#1">
<svg class="lexicon-icon lexicon-icon-share" focusable="false" role="presentation">
<use href="/images/icons/icons.svg#share" />
</svg>
</a>(.table-action-link),
<span>and some regular text</span>
</td>
<td class="table-column-text-center">
<button class="btn btn-unstyled table-action-link" type="button">
<svg class="lexicon-icon lexicon-icon-times-circle" focusable="false" role="presentation">
<use href="/images/icons/icons.svg#times-circle" />
</svg>
</button>
</td>
</tr>
<tr>
<td class="table-cell-expand">
<div class="table-title">
<a href="#1">Liferay Remote Example One</a>
</div>
</td>
<td class="table-cell-expand">
<a class="table-link" href="#1">Liferay Site Owner</a>
</td>
<td class="table-column-text-center">
<a class="table-action-link" href="#1">
<svg class="lexicon-icon lexicon-icon-times-circle" focusable="false" role="presentation">
<use href="/images/icons/icons.svg#times-circle" />
</svg>
</a>
</td>
</tr>
<tr>
<td class="table-cell-expand">
<div class="table-title">
<a href="#1">Liferay Remote Example Two</a>
</div>
</td>
<td class="table-cell-expand">
<a class="table-link" href="#1">Liferay Site Owner</a>
</td>
<td class="table-column-text-center">
<a class="table-action-link" href="#1">
<svg class="lexicon-icon lexicon-icon-times-circle" focusable="false" role="presentation">
<use href="/images/icons/icons.svg#times-circle" />
</svg>
</a>
</td>
</tr>
<tr>
<td class="table-cell-expand">
<div class="table-title">
<a href="#1">Liferay Remote Example Three</a>
</div>
</td>
<td class="table-cell-expand">
<a class="table-link" href="#1">Liferay Site Owner</a>
</td>
<td class="table-column-text-center">
<a class="table-action-link" href="#1">
<svg class="lexicon-icon lexicon-icon-times-circle" focusable="false" role="presentation">
<use href="/images/icons/icons.svg#times-circle" />
</svg>
</a>
</td>
</tr>
</tbody>
</table>
</div>| Country | Purchasing Power Parity | Official Exchange Rate | Real Growth Rate | Household Consumption | Government Consumption | Fixed Capital Investment | Inventories Investment | Exports | Imports |
|---|---|---|---|---|---|---|---|---|---|
| $45.3 billion | $20.65 billion | 3.1% | 96.5% | 23.3% | 25.4% | 0% | 18.1% | -63.4% | |
| $2.416 trillion | $2.19 trillion | 2.3% | 62.5% | 21.7% | 18.3% | 0% | 12.4% | -14.9% | |
| $29.39 billion | $18.56 billion | 6.2% | 65.9% | 12.5% | 27.9% | 1% | 49.9% | -56.3% | |
| $1.389 trillion | $1.356 trillion | -1.3% | 59% | 19.9% | 18.4% | 0.4% | 32.8% | -30.4% |
<div class="table-responsive">
<table class="table">
...
</table>
</div>Table Striped
| Country | Purchasing Power Parity | Official Exchange Rate | Real Growth Rate | Household Consumption | Government Consumption | Fixed Capital Investment | Inventories Investment | Exports | Imports |
|---|---|---|---|---|---|---|---|---|---|
| $45.3 billion | $20.65 billion | 3.1% | 96.5% | 23.3% | 25.4% | 0% | 18.1% | -63.4% | |
| $2.416 trillion | $2.19 trillion | 2.3% | 62.5% | 21.7% | 18.3% | 0% | 12.4% | -14.9% | |
| $29.39 billion | $18.56 billion | 6.2% | 65.9% | 12.5% | 27.9% | 1% | 49.9% | -56.3% | |
| $1.389 trillion | $1.356 trillion | -1.3% | 59% | 19.9% | 18.4% | 0.4% | 32.8% | -30.4% |
<div class="table-responsive">
<table class="table table-bordered">
...
</table>
</div>Table Bordered
| Country | Purchasing Power Parity | Official Exchange Rate | Real Growth Rate | Household Consumption | Government Consumption | Fixed Capital Investment | Inventories Investment | Exports | Imports |
|---|---|---|---|---|---|---|---|---|---|
| $45.3 billion | $20.65 billion | 3.1% | 96.5% | 23.3% | 25.4% | 0% | 18.1% | -63.4% | |
| $28.34 billion | $12.8 billion | 3.1% | 87.6% | 8.4% | 25% | -2.6% | 36% | -54.4% | |
| $2.416 trillion | $2.19 trillion | 2.3% | 62.5% | 21.7% | 18.3% | 0% | 12.4% | -14.9% | |
| $1.389 trillion | $1.356 trillion | -1.3% | 59% | 19.9% | 18.4% | 0.4% | 32.8% | -30.4% |
<div class="table-responsive">
<table class="table table-bordered">
...
</table>
</div>Table Hover
| Country | Purchasing Power Parity | Official Exchange Rate | Real Growth Rate | Household Consumption | Government Consumption | Fixed Capital Investment | Inventories Investment | Exports | Imports |
|---|---|---|---|---|---|---|---|---|---|
| $45.3 billion | $20.65 billion | 3.1% | 96.5% | 23.3% | 25.4% | 0% | 18.1% | -63.4% | |
| $2.416 trillion | $2.19 trillion | 2.3% | 62.5% | 21.7% | 18.3% | 0% | 12.4% | -14.9% | |
| $29.39 billion | $18.56 billion | 6.2% | 65.9% | 12.5% | 27.9% | 1% | 49.9% | -56.3% | |
| $1.389 trillion | $1.356 trillion | -1.3% | 59% | 19.9% | 18.4% | 0.4% | 32.8% | -30.4% |
<div class="table-responsive">
<table class="table table-bordered table-hover">
...
</table>
</div>