Skip to Content
Patternfly Logo

Table

A table is used to display large data sets that can be easily laid out in a simple grid with column headers. Related design guidelines: Lists and tables

ExamplesControlling textThe table-text elementLong strings in table cells will push content. Add a width modifier to DocumentationCSS Variables

Examples

Basic table

This is the table caption
Repositories Branches Pull requests Workspaces Last commit
Repository 1 10 25 5 2 days ago
Repository 2 10 25 5 2 days ago
Repository 3 10 25 5 2 days ago
Repository 4 10 25 5 2 days ago

Accessibility

AttributeApplied toOutcome
role="grid".pf-c-tableIdentifies the element that serves as the grid widget container. Required
aria-label.pf-c-tableProvides an accessible name for the table when a descriptive <caption> or <h*> is not available. Required in the absence of <caption> or <h*>
data-label="[td description]"<td>This attribute replaces table header in mobile viewport. It is rendered by ::before pseudo element.

Usage

ClassApplied toOutcome
.pf-c-table<table>Initiates a table element. Required
.pf-c-table__caption<caption>Initiates a table caption.
.pf-m-center<th>, <td>Modifies cell to center its contents.

Sortable

Workspaces
Last commit
Repository 1 10 25 5 2 days ago
Repository 2 10 25 5 2 days ago
Repository 3 10 25 5 2 days ago
Repository 4 10 25 5 2 days ago

Accessibility

AttributeApplied toOutcome
aria-sort=[ascending or descending].pf-c-table__sortIndicates if columns in a table are sorted in ascending or descending order. For each table, authors SHOULD apply aria-sort to only one header at a time. Required

Usage

ClassApplied toOutcome
.pf-c-table__sort<th>Initiates a table header sort cell. Required for sortable table columns
.pf-c-table__button<button>Initiates a table header sort cell button. Required for sortable table columns
.pf-c-table__button-content<div>Initiates a table header sort cell button content container. Required for sortable table columns Note: this is only necessary because <button> does not supportdisplay: grid.
.pf-c-table__sort-indicator.pf-c-table__sort > button > spanInitiates a sort indicator. Required for sortable table columns
.pf-m-selected.pf-c-table__sortModifies for sort selected state. Required for sortable table columns
.fa-arrows-alt-v.pf-c-table__sort > button > span > .fasInitiates icon within unsorted, sortable table header. Required for sortable table columns
.fa-long-arrow-alt-up.pf-c-table__sort > button > span > .fasInitiates icon within ascending sorted and selected, sortable table header. Required for sortable table columns
.fa-long-arrow-alt-down.pf-c-table__sort > button > span > .fasInitiates icon within descending sorted and selected, sortable table header. Required for sortable table columns

With checkboxes and actions

Repositories Branches Pull requests Workspaces Last commit
Node 1
10 25 5 2 days ago
10 25 5 2 days ago
10 25 5 2 days ago
10 25 5 2 days ago

When including interactive elements in a table, the primary, descriptive cell in the corresponding row is a <th>, rather than a <td>. In this example, 'Node 1' and 'Node 2 siemur/test-space' are <th>s.

When header cells are empty or they contain interactive elements, <th> should be replaced with <td>.

Thead accessibility

AttributeApplied toOutcome
aria-label="[descriptive text]".pf-c-table__check input[type="checkbox"]Provides an accessible name for the checkbox. Required

Tbody accessibility

AttributeApplied toOutcome
aria-labelledby="[row_header_id]" or aria-label="[descriptive text].pf-c-table__check input[type="checkbox"]Provides an accessible name for the checkbox. Required
idrow header <th> > *Provides an accessible description for the checkbox. Required if using aria-labelledby for .pf-c-table__check input[type="checkbox"]

Usage

ClassApplied toOutcome
.pf-c-table__check<th>, <td>Initiates a check table cell.
.pf-c-table__action<th>, <td>Initiates an action table cell.
.pf-c-table__inline-edit-action<th>, <td>Initiates an inline edit action table cell.

Expandable

10 25 Link 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
10 25 Link 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
10 25 Link 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
10 25 Link 4
Expandable row content has no padding.

Note: To apply padding to .pf-c-table__expandable-row, wrap the content in .pf-c-table__expandable-row-content. For no padding add .pf-m-no-padding to .pf-c-table__expandable-row > <td>

Accessibility

AttributeApplied toOutcome
hidden.pf-c-table__expandable-rowIndicates that the expandable content is hidden. Required
aria-expanded="true".pf-c-table__toggle > .pf-c-buttonIndicates that the row is visible. Required
aria-label="[descriptive text]".pf-c-table__toggle > .pf-c-buttonProvides an accessible name for toggle button. Required
aria-labelledby="[title_cell_id] [button_id]".pf-c-table__toggle > .pf-c-buttonProvides an accessible description for toggle button. Required
id="[button_id]".pf-c-table__toggle > .pf-c-buttonProvides a reference for toggle button description. Required
aria-controls="[id of element the button controls]".pf-c-table__toggle > .pf-c-buttonIdentifies the expanded content controlled by the toggle button. Required

Usage

ClassApplied toOutcome
.pf-c-table__toggle-icon<span>Initiates the table toggle icon wrapper.
.pf-c-table__expandable-row<tr>Initiates an expandable row.
.pf-c-table__expandable-row-content.pf-c-table__expandable-row > <td> > <div>Initiates an expandable row content wrapper.
.pf-m-expanded.pf-c-table__toggle > .pf-c-button, .pf-c-table__expandable-rowModifies for expanded state.
.pf-m-no-padding.pf-c-table__expandable-row > <td>Modifies the expandable row to have no padding.

With compound expansion

Workspaces Last commit
siemur/test-space 20 minutes Open in Github
Date Status
Item one May 9, 2018 Active
Item two May 9, 2018 Warning
Item three May 9, 2018 Active
Item four May 9, 2018 Active
Item five May 9, 2018 Active
Date Status
Item one May 9, 2018 Active
Item two May 9, 2018 Warning
Item three May 9, 2018 Active
Item four May 9, 2018 Active
Item five May 9, 2018 Active
Date Status
Item one May 9, 2018 Active
Item two May 9, 2018 Warning
Item three May 9, 2018 Active
Item four May 9, 2018 Active
Item five May 9, 2018 Active
siemur/test-space 1 day ago Open in Github
Date Status
Item one May 9, 2018 Active
Item two May 9, 2018 Warning
Item three May 9, 2018 Active
Item four May 9, 2018 Active
Item five May 9, 2018 Active
Date Status
Item one May 9, 2018 Active
Item two May 9, 2018 Warning
Item three May 9, 2018 Active
Item four May 9, 2018 Active
Item five May 9, 2018 Active
Date Status
Item one May 9, 2018 Active
Item two May 9, 2018 Warning
Item three May 9, 2018 Active
Item four May 9, 2018 Active
Item five May 9, 2018 Active
siemur/test-space 2 days ago Open in Github
Date Status
Item one May 9, 2018 Active
Item two May 9, 2018 Warning
Item three May 9, 2018 Active
Item four May 9, 2018 Active
Item five May 9, 2018 Active
Date Status
Item one May 9, 2018 Active
Item two May 9, 2018 Warning
Item three May 9, 2018 Active
Item four May 9, 2018 Active
Item five May 9, 2018 Active
Date Status
Item one May 9, 2018 Active
Item two May 9, 2018 Warning
Item three May 9, 2018 Active
Item four May 9, 2018 Active
Item five May 9, 2018 Active

Accessibility

AttributeApplied toOutcome
hidden.pf-c-table__expandable-rowIndicates that the expandable content is hidden. Required
aria-expanded="true".pf-c-table__compound-expansion-toggle > .pf-c-buttonIndicates that the row is visible. Required
aria-controls="[id of element the button controls]".pf-c-table__compound-expansion-toggle > .pf-c-buttonIdentifies the expanded content controlled by the toggle button. Required

Usage

ClassApplied toOutcome
.pf-m-expanded<tbody>, .pf-c-table__compound-expansion-toggle > .pf-c-buttonModifies a tbody with a row and an expandable row.
.pf-c-table__compound-expansion-toggle<td>Modifies a <td> on active/focus.

Compact

Contributor Position Location Last seen Numbers Icons
Sam Jones CSS guru Not too sure May 9, 2018 0556 Action link
Amy Miller Visual design Raleigh May 9, 2018 9492 Action link
Steve Wilson Visual design lead Westford May 9, 2018 9929 Action link
Emma Jackson Interaction design Westford May 9, 2018 2217 Action link

Usage

ClassApplied toOutcome
.pf-m-compact.pf-c-tableModifies for a compact table.

Compact with no borders

Contributor Position Location Last seen Numbers Icons
Sam Jones CSS guru Not too sure May 9, 2018 0556 Action link
Amy Miller Visual design Raleigh May 9, 2018 9492 Action link
Steve Wilson Visual design lead Westford May 9, 2018 9929 Action link
Emma Jackson Interaction design Westford May 9, 2018 2217 Action link

Usage

ClassApplied toOutcome
.pf-m-no-border-rows.pf-c-table.pf-m-compactModifies to remove borders between rows. Note: Can not be used with .pf-m-expandable.

Compact expandable

Repositories Branches Pull requests

Node 1

10 25 Link
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Node 2

10 25 Link
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Node 3

10 25 Link
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Node 4

10 25 Link
This content has no padding.

Node 5

10 25 Link
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Usage

ClassApplied toOutcome
.pf-m-expandable.pf-c-table.pf-m-compactIndicates that the table has expandable rows. Note: Can not be used with .pf-m-no-border-rows.

With width modifiers

Workspaces Last commit
Node 1
10 25 5 2 days ago
10 25 5 2 days ago
10 25 5 2 days ago
10 25 5 2 days ago

Usage

ClassApplied toOutcome
.pf-m-width-[10, 15, 20, 25, 30, 35, 40, 45, 50, 60, 70, 80, or 90]<th>, <td>Percentage based modifier for th and td widths. Recommended for sortable title cell
.pf-m-width-max<th>, <td>Percentage based modifier for th and td maximum width.
.pf-m-fit-content<th>, <td>Percentage based modifier for th and td minimum width with no text wrapping.

With hidden/visible breakpoint modifiers

Repositories Branches Pull requests Workspaces Last commit
Visible only on md breakpoint 10 Hidden only on md breakpoint 5 Hidden on xs breakpoint
Repository 2 10 25 5 2 days ago
Repository 3 10 25 5 2 days ago
Repository 4 10 25 5 2 days ago

Usage

ClassApplied toOutcome
.pf-m-hidden{-on-[breakpoint]}.pf-c-table tr > *Hides a table cell at a given breakpoint, or hides it at all breakpoints with .pf-m-hidden. Note: Needs to apply to all cells in the column you want to hide.
.pf-m-visible{-on-[breakpoint]}.pf-c-table tr > *Shows a table cell at a given breakpoint.

Controlling text

To better control table cell behavior, PatternFly provides a series of modifiers to help contextually control layout. By default, thead cells are set to truncate, whereas tbody cells are set to wrap. Both th and td cells use a set of shared css properties mapped to customizable css variable values. Because only the shared css variables are changed by the modifier selector and not the properties, the modifier can be applied to any parent element up until .pf-c-table itself [thead, tbody, tr, th, td, .pf-c-table__text].

ClassApplied toOutcome
.pf-m-wrapthead, tbody, tr, th, td, .pf-c-table__textSets table cell content to wrap. If applied to thead, tbody or tr, then all child cells will be affected. This is the default behavior for tbody cells.
.pf-m-truncatethead, tbody, tr, th, td, .pf-c-table__textSets text to truncate based on a minimum width and available space adjacent table cells. If applied to thead, tbody or tr, then all child cells will be affected. This is the default behavior for thead cells.
.pf-m-nowrapthead, tbody, tr, th, td, .pf-c-table__textUnsets min/max width and sets whitespace to nowrap. If applied to thead, tbody or tr, then all child cells will be affected. This is specifically beneficial for cell's whose thead th cells are blank. The following example highlights link text that should display inline. Be careful with this modifier, it will prioritize its cell's content above all other cell's contents.
.pf-m-fit-contentthead, tbody, tr, th, td, .pf-c-table__textFit column width to cell content. If applied to thead, tbody or tr, then all child cells will be affected.
.pf-m-break-wordthead, tbody, tr, th, td, .pf-c-table__textBreaks long strings wherever necessary as defined by the table layout. If applied to thead, tbody or tr, then all child cells will be affected.

Modifiers without text wrapper

Truncate (width 20%) Break word Wrapping table header text. This thtext will wrap instead of truncate. Fit content
This text will truncate instead of wrap in table layout and wrap gracefully in grid layout. http://thisisaverylongurlthatneedstobreakusethebreakwordmodifier.org

By default, theadcells will truncate and tbodycells will wrap. Use .pf-m-wrapon a thto change its behavior.

This cell's content will adjust itself to the parent th width. This modifier only affects table layouts. No wrap

The table-text element

By default, truncation and wrapping settings do not affect the grid layout, but text will fallback gracefully by passively wrapping long strings. Truncation and wrapping settings will persist with the addition of a .pf-c-table__text wrapper on table cell content. In addition to .pf-c-table__text, all PatternFly layouts can be used in table cells and contain table text elements.

Table text element

This table contains .pf-c-table__text  examples. The .pf-c-table__text  element can be using alone or in a nested configuration.
Selector/element Result
th.pf-m-truncate
This table cell contains a single `.pf-c-table__text`  wrapper with the parent table cell applying `.pf-m-truncate`. The child `.pf-c-table__text`  element will inherit the modifier settings and apply to the grid layout.
.pf-l-stack
Because .pf-m-grid  applies a grid layout to .pf-c-table, child elements will stack in the grid layout. To prevent this, wrap multiple elements with a div or use a PatternFly layout.

The .pf-c-table__text element  can additionally be nested, like in this example. The next .pf-c-table__textelement has a very long url whose width needs be constrained.

This .pf-c-table__text element  applies its own built in grid layout .pf-m-stack  as well as a gutter .pf-m-gutter .

.pf-l-flex

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

.pf-l-flex
 5
 9
 2
 11

This is paragraph that we want to wrap. It doesn't need a modifier and has no extra long strings. Any modifier available for the flex layout can be used here.

.pf-l-grid
Item 1
Item 2
Item 3
Item 4

This is paragraph that we want to wrap. It doesn't need a modifier and has no extra long strings. Any modifier available for the flex layout can be used here.

Usage

ClassApplied toOutcome
.pf-c-table__textth > *, td > *Initiates a table text element.
.pf-m-truncatethead, tbody, tr, th, td, .pf-c-table__textModifies text to truncate.
.pf-m-nowrapthead, tbody, tr, th, td, .pf-c-table__textModifies text to not wrap.
.pf-m-wrapthead, tbody, tr, th, td, .pf-c-table__textModifies text to wrap.
.pf-m-fit-contentthead, tr, th, .pf-c-table__textModifies th to fit its contents.
.pf-m-break-wordthead, tbody, tr, th, td, .pf-c-table__textModifies text strings to break.

th truncation

Repositories Branches Pull requests Workspaces Last commit
Long lines of text will shrink adjacent column widths. 10 25 5 2 days ago
This example is not responsive. Adjacent tbodycells will shrink as a result of this text being a longer string and adjacent text being shorter in length. Truncation can be overridden in thcells with the addition of .pf-m-wrap, .pf-m-nowrapor .pf-m-fit-content. 10 25 5 2 days ago

Long strings in table cells will push content. Add a width modifier to thead th to limit string length or add .pf-m-truncate to tbody td.

Width constrained

Width 40 Branches Pull requests Fit content th Last commit
Since this is a long string of text and the other cells contain short strings (narrower than their table header), we'll need to control width this table header's width. Let's set width to 40%. 10 25 5 2 days ago
This string will truncate in table mode only. Since this is a long string of text and the other cells contain short strings (narrower than their table header), we'll need to control width this table header's width. Let's set width to 40%. 10 25 5 2 days ago
Repositories Branches Pull requests Workspaces Last commit
Repository 1 10 25 5 2 days ago
Repository 2 10 25 5 2 days ago
Repository 3 10 25 5 2 days ago
Repository 4 10 25 5 2 days ago

Usage

ClassApplied toOutcome
.pf-m-wrap<th>, <td>Modifies content to wrap.

Documentation

Overview

Because the table component is not used for layout and presents tabular data only, it requires the use of role="grid". Expandable table content (.pf-c-table__expandable-content) is placed within a singular <td> per expandable row, that can span multiple columns.

Role="grid"

Applying role="grid" to tables enhances accessible interaction while in table layout, however the responsive, css grid based layout can cause unexpected interactions. Therefore, for css grid layout, it is recommended that role="grid" be removed.

Sortable tables

Table columns may shift when expanding/collapsing. To address this, set .pf-m-fit-content, or assign a width .pf-m-width-[width] to the corresponding <th> defining the column or <td> within the column. Width values are [10, 15, 20, 25, 30, 35, 40, 45, 50, 60, 70, 80, 90] or max.

Table header cells

By default, all table header cells are set to white-space: nowrap. If a <th>'s content needs to wrap, apply .pf-m-wrap.

Implementation support

  • One expandable toggle button, positioned in the first cell of a non-expandable row, preceding an expandable row.
  • One checkbox, positioned in the first or second cell of a non-expandable row.
  • One action button, positioned in the last cell of a non-expandable row.
  • Tabular data.
  • Compact presentation modifier (not compatible with expandable table).

Responsive layout modifiers

ClassApplied toOutcome
.pf-m-grid-md, .pf-m-grid-lg, .pf-m-grid-xl, .pf-m-grid-2xl.pf-c-tableChanges tabular layout to responsive, grid based layout at suffixed breakpoint.
.pf-m-grid.pf-c-tableChanges tabular layout to responsive, grid based layout. This approach requires JavaScript to set this class at some prescribed viewport width value.
.pf-m-sticky-header.pf-c-tableMakes the table cells in <thead> sticky to the top of the table on scroll.

CSS Variables

.pf-c-table--pf-global--Color--100global_Color_100
#151515
.pf-c-table--pf-global--Color--200global_Color_200
#6a6e73
.pf-c-table--pf-global--BorderColor--100global_BorderColor_100
#d2d2d2
.pf-c-table--pf-global--primary-color--100global_primary_color_100
#06c
.pf-c-table--pf-global--link--Colorglobal_link_Color
#06c
.pf-c-table--pf-global--link--Color--hoverglobal_link_Color_hover
#004080
.pf-c-table--pf-global--BackgroundColor--100global_BackgroundColor_100
#fff
.pf-c-table--pf-c-table--BackgroundColorc_table_BackgroundColor
#fff
.pf-c-table--pf-c-table--BorderColorc_table_BorderColor
#d2d2d2
.pf-c-table--pf-c-table--border-width--basec_table_border_width_base
1px
.pf-c-table--pf-c-table-caption--FontSizec_table_caption_FontSize
0.875rem
.pf-c-table--pf-c-table-caption--Colorc_table_caption_Color
#6a6e73
.pf-c-table--pf-c-table-caption--PaddingTopc_table_caption_PaddingTop
1rem
.pf-c-table--pf-c-table-caption--PaddingRightc_table_caption_PaddingRight
1.5rem
.pf-c-table--pf-c-table-caption--PaddingBottomc_table_caption_PaddingBottom
1rem
.pf-c-table--pf-c-table-caption--PaddingLeftc_table_caption_PaddingLeft
1.5rem
.pf-c-table--pf-c-table-caption--xl--PaddingRightc_table_caption_xl_PaddingRight
1rem
.pf-c-table--pf-c-table-caption--xl--PaddingLeftc_table_caption_xl_PaddingLeft
1rem
.pf-c-table--pf-c-table--thead--cell--FontSizec_table_thead_cell_FontSize
0.875rem
.pf-c-table--pf-c-table--thead--cell--FontWeightc_table_thead_cell_FontWeight
700
.pf-c-table--pf-c-table--tbody--cell--PaddingTopc_table_tbody_cell_PaddingTop
1.5rem
.pf-c-table--pf-c-table--tbody--cell--PaddingBottomc_table_tbody_cell_PaddingBottom
1.5rem
.pf-c-table--pf-c-table--cell--FontSizec_table_cell_FontSize
1rem
.pf-c-table--pf-c-table--cell--FontWeightc_table_cell_FontWeight
400
.pf-c-table--pf-c-table--cell--Colorc_table_cell_Color
#151515
.pf-c-table--pf-c-table--cell--PaddingTopc_table_cell_PaddingTop
1rem
.pf-c-table--pf-c-table--cell--PaddingRightc_table_cell_PaddingRight
1rem
.pf-c-table--pf-c-table--cell--PaddingBottomc_table_cell_PaddingBottom
1rem
.pf-c-table--pf-c-table--cell--PaddingLeftc_table_cell_PaddingLeft
1rem
.pf-c-table--pf-c-table--cell--first-last-child--PaddingLeftc_table_cell_first_last_child_PaddingLeft
1rem
.pf-c-table--pf-c-table--cell--first-last-child--PaddingRightc_table_cell_first_last_child_PaddingRight
1rem
.pf-c-table--pf-c-table--cell--first-last-child--xl--PaddingLeftc_table_cell_first_last_child_xl_PaddingLeft
1.5rem
.pf-c-table--pf-c-table--cell--first-last-child--xl--PaddingRightc_table_cell_first_last_child_xl_PaddingRight
1.5rem
.pf-c-table--pf-c-table--cell--MinWidthc_table_cell_MinWidth
0
.pf-c-table--pf-c-table--cell--MaxWidthc_table_cell_MaxWidth
none
.pf-c-table--pf-c-table--cell--Widthc_table_cell_Width
auto
.pf-c-table--pf-c-table--cell--Overflowc_table_cell_Overflow
visible
.pf-c-table--pf-c-table--cell--TextOverflowc_table_cell_TextOverflow
clip
.pf-c-table--pf-c-table--cell--WhiteSpacec_table_cell_WhiteSpace
normal
.pf-c-table--pf-c-table--cell--WordBreakc_table_cell_WordBreak
normal
.pf-c-table--pf-c-table--m-truncate--cell--MaxWidthc_table_m_truncate_cell_MaxWidth
1px
.pf-c-table--pf-c-table--m-truncate--cell--MinWidthc_table_m_truncate_cell_MinWidth
calc(5ch + 1rem + 1rem)
.pf-c-table--pf-c-table--cell--hidden-visible--Displayc_table_cell_hidden_visible_Display
table-cell
.pf-c-table--pf-c-table__toggle--c-button--MarginTopc_table__toggle_c_button_MarginTop
calc(0.375rem * -1)
.pf-c-table--pf-c-table__toggle--c-button__toggle-icon--Rotatec_table__toggle_c_button__toggle_icon_Rotate
270deg
.pf-c-table--pf-c-table__toggle--c-button__toggle-icon--Transitionc_table__toggle_c_button__toggle_icon_Transition
.2s ease-in 0s
.pf-c-table--pf-c-table__toggle--c-button--m-expanded__toggle-icon--Rotatec_table__toggle_c_button_m_expanded__toggle_icon_Rotate
360deg
.pf-c-table--pf-c-table__button--BackgroundColorc_table__button_BackgroundColor
transparent
.pf-c-table--pf-c-table__button--Colorc_table__button_Color
#151515
.pf-c-table--pf-c-table__button--hover--Colorc_table__button_hover_Color
#151515
.pf-c-table--pf-c-table__button--focus--Colorc_table__button_focus_Color
#151515
.pf-c-table--pf-c-table__button--active--Colorc_table__button_active_Color
#151515
.pf-c-table--pf-c-table__button--OutlineOffsetc_table__button_OutlineOffset
calc(3px * -1)
.pf-c-table--pf-c-table--m-compact__toggle--PaddingTopc_table_m_compact__toggle_PaddingTop
0
.pf-c-table--pf-c-table--m-compact__toggle--PaddingBottomc_table_m_compact__toggle_PaddingBottom
0
.pf-c-table--pf-c-table__check--input--MarginTopc_table__check_input_MarginTop
0.25rem
.pf-c-table--pf-c-table__check--input--FontSizec_table__check_input_FontSize
1rem
.pf-c-table--pf-c-table__action--PaddingTopc_table__action_PaddingTop
0
.pf-c-table--pf-c-table__action--PaddingRightc_table__action_PaddingRight
0
.pf-c-table--pf-c-table__action--PaddingBottomc_table__action_PaddingBottom
0
.pf-c-table--pf-c-table__action--PaddingLeftc_table__action_PaddingLeft
0
.pf-c-table--pf-c-table__inline-edit-action--PaddingTopc_table__inline_edit_action_PaddingTop
0
.pf-c-table--pf-c-table__inline-edit-action--PaddingRightc_table__inline_edit_action_PaddingRight
0
.pf-c-table--pf-c-table__inline-edit-action--PaddingBottomc_table__inline_edit_action_PaddingBottom
0
.pf-c-table--pf-c-table__inline-edit-action--PaddingLeftc_table__inline_edit_action_PaddingLeft
0
.pf-c-table--pf-c-table__expandable-row--Transitionc_table__expandable_row_Transition
all 250ms cubic-bezier(.42, 0, .58, 1)
.pf-c-table--pf-c-table__expandable-row--MaxHeightc_table__expandable_row_MaxHeight
28.125rem
.pf-c-table--pf-c-table__expandable-row-content--Transitionc_table__expandable_row_content_Transition
all 250ms cubic-bezier(.42, 0, .58, 1)
.pf-c-table--pf-c-table__expandable-row-content--PaddingTopc_table__expandable_row_content_PaddingTop
1.5rem
.pf-c-table--pf-c-table__expandable-row-content--PaddingBottomc_table__expandable_row_content_PaddingBottom
1.5rem
.pf-c-table--pf-c-table__expandable-row--after--Topc_table__expandable_row_after_Top
calc(1px * -1)
.pf-c-table--pf-c-table__expandable-row--after--Bottomc_table__expandable_row_after_Bottom
calc(1px * -1)
.pf-c-table--pf-c-table__expandable-row--after--border-width--basec_table__expandable_row_after_border_width_base
3px
.pf-c-table--pf-c-table__expandable-row--after--BorderLeftWidthc_table__expandable_row_after_BorderLeftWidth
0
.pf-c-table--pf-c-table__expandable-row--after--BorderColorc_table__expandable_row_after_BorderColor
#06c
.pf-c-table--pf-c-table__icon-inline--MarginRightc_table__icon_inline_MarginRight
0.5rem
.pf-c-table--pf-c-table__sort--MinWidthc_table__sort_MinWidth
calc(6ch + 1rem + 1rem + 1rem)
.pf-c-table--pf-c-table__sort__button--PaddingTopc_table__sort__button_PaddingTop
0.375rem
.pf-c-table--pf-c-table__sort__button--PaddingRightc_table__sort__button_PaddingRight
0.5rem
.pf-c-table--pf-c-table__sort__button--PaddingBottomc_table__sort__button_PaddingBottom
0.375rem
.pf-c-table--pf-c-table__sort__button--PaddingLeftc_table__sort__button_PaddingLeft
0.5rem
.pf-c-table--pf-c-table__sort__button--MarginTopc_table__sort__button_MarginTop
calc(0.375rem * -1)
.pf-c-table--pf-c-table__sort__button--MarginBottomc_table__sort__button_MarginBottom
calc(0.375rem * -1)
.pf-c-table--pf-c-table__sort__button--MarginLeftc_table__sort__button_MarginLeft
calc(0.5rem * -1)
.pf-c-table--pf-c-table__sort__button--Colorc_table__sort__button_Color
#151515
.pf-c-table--pf-c-table__sort--m-selected__button--Colorc_table__sort_m_selected__button_Color
#06c
.pf-c-table--pf-c-table__sort-indicator--Colorc_table__sort_indicator_Color
#d2d2d2
.pf-c-table--pf-c-table__sort-indicator--MarginLeftc_table__sort_indicator_MarginLeft
1rem
.pf-c-table--pf-c-table__sort--m-selected__sort-indicator--Colorc_table__sort_m_selected__sort_indicator_Color
#06c
.pf-c-table--pf-c-table__sort__button--hover__sort-indicator--Colorc_table__sort__button_hover__sort_indicator_Color
#151515
.pf-c-table--pf-c-table__sort__button--active__sort-indicator--Colorc_table__sort__button_active__sort_indicator_Color
#151515
.pf-c-table--pf-c-table__sort__button--focus__sort-indicator--Colorc_table__sort__button_focus__sort_indicator_Color
#151515
.pf-c-table--pf-c-table__column-help--MarginLeftc_table__column_help_MarginLeft
0.25rem
.pf-c-table--pf-c-table__column-help--TranslateYc_table__column_help_TranslateY
0.125rem
.pf-c-table--pf-c-table__column-help--c-button--MarginTopc_table__column_help_c_button_MarginTop
calc(0.375rem * -1)
.pf-c-table--pf-c-table__column-help--c-button--MarginBottomc_table__column_help_c_button_MarginBottom
calc(0.375rem * -1)
.pf-c-table--pf-c-table__column-help--c-button--PaddingRightc_table__column_help_c_button_PaddingRight
0.5rem
.pf-c-table--pf-c-table__column-help--c-button--PaddingLeftc_table__column_help_c_button_PaddingLeft
0.5rem
.pf-c-table--pf-c-table__compound-expansion-toggle__button--Colorc_table__compound_expansion_toggle__button_Color
#06c
.pf-c-table--pf-c-table__compound-expansion-toggle__button--hover--Colorc_table__compound_expansion_toggle__button_hover_Color
#004080
.pf-c-table--pf-c-table__compound-expansion-toggle__button--focus--Colorc_table__compound_expansion_toggle__button_focus_Color
#004080
.pf-c-table--pf-c-table__compound-expansion-toggle__button--active--Colorc_table__compound_expansion_toggle__button_active_Color
#004080
.pf-c-table--pf-c-table__compound-expansion-toggle__button--before--border-width--basec_table__compound_expansion_toggle__button_before_border_width_base
1px
.pf-c-table--pf-c-table__compound-expansion-toggle__button--before--BorderColorc_table__compound_expansion_toggle__button_before_BorderColor
#d2d2d2
.pf-c-table--pf-c-table__compound-expansion-toggle__button--before--BorderRightWidthc_table__compound_expansion_toggle__button_before_BorderRightWidth
0
.pf-c-table--pf-c-table__compound-expansion-toggle__button--before--BorderLeftWidthc_table__compound_expansion_toggle__button_before_BorderLeftWidth
0
.pf-c-table--pf-c-table__compound-expansion-toggle__button--before--Bottomc_table__compound_expansion_toggle__button_before_Bottom
calc(1px * -1)
.pf-c-table--pf-c-table__compound-expansion-toggle__button--before--Leftc_table__compound_expansion_toggle__button_before_Left
calc(1px * -1)
.pf-c-table--pf-c-table__compound-expansion-toggle__button--after--border-width--basec_table__compound_expansion_toggle__button_after_border_width_base
3px
.pf-c-table--pf-c-table__compound-expansion-toggle__button--after--BorderColorc_table__compound_expansion_toggle__button_after_BorderColor
#06c
.pf-c-table--pf-c-table__compound-expansion-toggle__button--after--BorderTopWidthc_table__compound_expansion_toggle__button_after_BorderTopWidth
0
.pf-c-table--pf-c-table__compound-expansion-toggle__button--after--Topc_table__compound_expansion_toggle__button_after_Top
calc(1px * -1)
.pf-c-table--pf-c-table__compound-expansion-toggle__button--after--Leftc_table__compound_expansion_toggle__button_after_Left
calc(1px * -1)
.pf-c-table--pf-c-table--m-compact-th--PaddingTopc_table_m_compact_th_PaddingTop
calc(0.5rem + 0.25rem)
.pf-c-table--pf-c-table--m-compact-th--PaddingBottomc_table_m_compact_th_PaddingBottom
0.5rem
.pf-c-table--pf-c-table--m-compact--cell--PaddingTopc_table_m_compact_cell_PaddingTop
0.5rem
.pf-c-table--pf-c-table--m-compact--cell--PaddingRightc_table_m_compact_cell_PaddingRight
0.5rem
.pf-c-table--pf-c-table--m-compact--cell--PaddingBottomc_table_m_compact_cell_PaddingBottom
0.5rem
.pf-c-table--pf-c-table--m-compact--cell--PaddingLeftc_table_m_compact_cell_PaddingLeft
0.5rem
.pf-c-table--pf-c-table--m-compact--cell--first-last-child--PaddingLeftc_table_m_compact_cell_first_last_child_PaddingLeft
1rem
.pf-c-table--pf-c-table--m-compact--cell--first-last-child--PaddingRightc_table_m_compact_cell_first_last_child_PaddingRight
1rem
.pf-c-table--pf-c-table--m-compact--cell--first-last-child--xl--PaddingLeftc_table_m_compact_cell_first_last_child_xl_PaddingLeft
1.5rem
.pf-c-table--pf-c-table--m-compact--cell--first-last-child--xl--PaddingRightc_table_m_compact_cell_first_last_child_xl_PaddingRight
1.5rem
.pf-c-table--pf-c-table--m-compact--FontSizec_table_m_compact_FontSize
0.875rem
.pf-c-table--pf-c-table--m-compact__expandable-row-content--PaddingTopc_table_m_compact__expandable_row_content_PaddingTop
1.5rem
.pf-c-table--pf-c-table--m-compact__expandable-row-content--PaddingRightc_table_m_compact__expandable_row_content_PaddingRight
1.5rem
.pf-c-table--pf-c-table--m-compact__expandable-row-content--PaddingBottomc_table_m_compact__expandable_row_content_PaddingBottom
1.5rem
.pf-c-table--pf-c-table--m-compact__expandable-row-content--PaddingLeftc_table_m_compact__expandable_row_content_PaddingLeft
1.5rem
.pf-c-table--pf-c-table--nested--first-last-child--PaddingRightc_table_nested_first_last_child_PaddingRight
4rem
.pf-c-table--pf-c-table--nested--first-last-child--PaddingLeftc_table_nested_first_last_child_PaddingLeft
4rem
.pf-c-table--pf-c-table__expandable-row--m-expanded--BorderBottomColorc_table__expandable_row_m_expanded_BorderBottomColor
#d2d2d2
.pf-c-table tr > *--pf-hidden-visible--visible--Visibilityhidden_visible_visible_Visibility
visible
.pf-c-table tr > *--pf-hidden-visible--hidden--Displayhidden_visible_hidden_Display
none
.pf-c-table tr > *--pf-hidden-visible--hidden--Visibilityhidden_visible_hidden_Visibility
hidden
.pf-c-table tr > *--pf-hidden-visible--Displayhidden_visible_Display
table-cell
.pf-c-table tr > *--pf-hidden-visible--Visibilityhidden_visible_Visibility
visible
.pf-c-table tr > *--pf-hidden-visible--visible--Displayhidden_visible_visible_Display
table-cell
.pf-c-table tr > .pf-m-hidden--pf-hidden-visible--Displayhidden_visible_Display
none
.pf-c-table tr > .pf-m-hidden--pf-hidden-visible--Visibilityhidden_visible_Visibility
hidden
.pf-c-table tr > *:first-child--pf-c-table--cell--PaddingLeftc_table_cell_PaddingLeft
1rem
.pf-c-table tr > *:last-child--pf-c-table--cell--PaddingRightc_table_cell_PaddingRight
1rem
.pf-c-table thead--pf-c-table--cell--FontSizec_table_cell_FontSize
0.875rem
.pf-c-table thead--pf-c-table--cell--FontWeightc_table_cell_FontWeight
700
.pf-c-table thead--pf-c-table--cell--MinWidthc_table_cell_MinWidth
calc(5ch + 1rem + 1rem)
.pf-c-table thead--pf-c-table--cell--MaxWidthc_table_cell_MaxWidth
1px
.pf-c-table thead--pf-c-table--cell--Overflowc_table_cell_Overflow
hidden
.pf-c-table thead--pf-c-table--cell--TextOverflowc_table_cell_TextOverflow
ellipsis
.pf-c-table thead--pf-c-table--cell--WhiteSpacec_table_cell_WhiteSpace
nowrap
.pf-c-table tbody--pf-c-table--cell--PaddingTopc_table_cell_PaddingTop
1.5rem
.pf-c-table tbody--pf-c-table--cell--PaddingBottomc_table_cell_PaddingBottom
1.5rem
.pf-c-table .pf-m-wrap--pf-c-table--cell--MinWidthc_table_cell_MinWidth
0
.pf-c-table .pf-m-wrap--pf-c-table--cell--MaxWidthc_table_cell_MaxWidth
none
.pf-c-table .pf-m-wrap--pf-c-table--cell--Overflowc_table_cell_Overflow
visible
.pf-c-table .pf-m-wrap--pf-c-table--cell--TextOverflowc_table_cell_TextOverflow
clip
.pf-c-table .pf-m-wrap--pf-c-table--cell--WhiteSpacec_table_cell_WhiteSpace
normal
.pf-c-table .pf-m-nowrap--pf-c-table--cell--MinWidthc_table_cell_MinWidth
0
.pf-c-table .pf-m-nowrap--pf-c-table--cell--MaxWidthc_table_cell_MaxWidth
none
.pf-c-table .pf-m-nowrap--pf-c-table--cell--Overflowc_table_cell_Overflow
visible
.pf-c-table .pf-m-nowrap--pf-c-table--cell--TextOverflowc_table_cell_TextOverflow
clip
.pf-c-table .pf-m-nowrap--pf-c-table--cell--WhiteSpacec_table_cell_WhiteSpace
nowrap
.pf-c-table .pf-c-table__icon--pf-c-table--cell--MinWidthc_table_cell_MinWidth
fit-content
.pf-c-table .pf-c-table__icon--pf-c-table--cell--MaxWidthc_table_cell_MaxWidth
fit-content
.pf-c-table .pf-c-table__icon--pf-c-table--cell--Widthc_table_cell_Width
1%
.pf-c-table .pf-c-table__icon--pf-c-table--cell--Overflowc_table_cell_Overflow
visible
.pf-c-table .pf-c-table__icon--pf-c-table--cell--TextOverflowc_table_cell_TextOverflow
clip
.pf-c-table .pf-c-table__icon--pf-c-table--cell--WhiteSpacec_table_cell_WhiteSpace
nowrap
.pf-c-table .pf-m-break-word--pf-c-table--cell--WordBreakc_table_cell_WordBreak
break-word
.pf-c-table .pf-m-break-word--pf-c-table--cell--WhiteSpacec_table_cell_WhiteSpace
normal
.pf-c-table__text--pf-c-table--cell--MaxWidthc_table_cell_MaxWidth
100%
.pf-c-table__text.pf-m-truncate--pf-c-table--cell--MinWidthc_table_cell_MinWidth
100%
.pf-c-table__sort .pf-c-table__text--pf-c-table--cell--MinWidthc_table_cell_MinWidth
0
.pf-c-table .pf-c-table__toggle--pf-c-table--cell--PaddingBottomc_table_cell_PaddingBottom
0
.pf-c-table .pf-c-table__check--pf-c-table--cell--MinWidthc_table_cell_MinWidth
0
.pf-c-table .pf-c-table__check--pf-c-table--cell--Widthc_table_cell_Width
1%
.pf-c-table__toggle--pf-c-table--cell--PaddingRightc_table_cell_PaddingRight
0
.pf-c-table__toggle--pf-c-table--cell--PaddingLeftc_table_cell_PaddingLeft
0
.pf-c-table__check--pf-c-table--cell--FontSizec_table_cell_FontSize
1rem
.pf-c-table__action--pf-c-table--cell--PaddingTopc_table_cell_PaddingTop
0
.pf-c-table__action--pf-c-table--cell--PaddingRightc_table_cell_PaddingRight
0
.pf-c-table__action--pf-c-table--cell--PaddingBottomc_table_cell_PaddingBottom
0
.pf-c-table__action--pf-c-table--cell--PaddingLeftc_table_cell_PaddingLeft
0
.pf-c-table__inline-edit-action--pf-c-table--cell--PaddingLeftc_table_cell_PaddingLeft
0
.pf-c-table__inline-edit-action--pf-c-table--cell--PaddingRightc_table_cell_PaddingRight
0
.pf-c-table__compound-expansion-toggle--pf-c-table__button--Colorc_table__button_Color
#06c
.pf-c-table__compound-expansion-toggle--pf-c-table__button--hover--Colorc_table__button_hover_Color
#004080