HTML

Table

ExamplesDocumentationCSS Variables

Examples

Basic

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-height-auto<tr>Modifies a <tr> to have height: auto, which undoes the height declaration currently on <tr> elements.
.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 sort table cell. Required for sortable table columns
.pf-m-selected.pf-c-table__sortModifies for sort selected state. Required for sortable table columns
.pf-c-table__sort-indicator.pf-c-table__sort > button > spanInitiates a sort indicator. 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.

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<i>Initiates a table toggle icon.
.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.

With headers that wrap

This is the table caption
This is a really long table header that goes on for a long time. This is a really long table header that goes on for a long time. This is a really long table header that goes on for a long time. This is a really long table header that goes on for a long time. This is a really long table header that goes on for a long time.
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.

CSS Variables

--pf-c-table__action--PaddingBottomc_table__action_PaddingBottom
0
--pf-c-table__action--PaddingLeftc_table__action_PaddingLeft
0.5rem
--pf-c-table__action--PaddingRightc_table__action_PaddingRight
0.5rem
--pf-c-table__action--PaddingTopc_table__action_PaddingTop
0
--pf-c-table__action--responsive--MarginLeftc_table__action_responsive_MarginLeft
2rem
--pf-c-table__check--input--MarginTopc_table__check_input_MarginTop
0.1875rem
--pf-c-table__check--responsive--MarginLeftc_table__check_responsive_MarginLeft
0.5rem
--pf-c-table__check--responsive--MarginTopc_table__check_responsive_MarginTop
0.375rem
--pf-c-table__compound-expansion-toggle--BorderBottom--BorderColorc_table__compound_expansion_toggle_BorderBottom_BorderColor
#fff
--pf-c-table__compound-expansion-toggle--BorderBottom--BorderWidthc_table__compound_expansion_toggle_BorderBottom_BorderWidth
1px
--pf-c-table__compound-expansion-toggle--BorderLeft--BorderColorc_table__compound_expansion_toggle_BorderLeft_BorderColor
#d2d2d2
--pf-c-table__compound-expansion-toggle--BorderLeft--BorderWidthc_table__compound_expansion_toggle_BorderLeft_BorderWidth
1px
--pf-c-table__compound-expansion-toggle--BorderRight--BorderColorc_table__compound_expansion_toggle_BorderRight_BorderColor
#d2d2d2
--pf-c-table__compound-expansion-toggle--BorderRight--BorderWidthc_table__compound_expansion_toggle_BorderRight_BorderWidth
1px
--pf-c-table__compound-expansion-toggle--BorderTop--BorderColorc_table__compound_expansion_toggle_BorderTop_BorderColor
#06c
--pf-c-table__compound-expansion-toggle--BorderTop--BorderWidthc_table__compound_expansion_toggle_BorderTop_BorderWidth
3px
--pf-c-table__expandable-row--before--BackgroundColorc_table__expandable_row_before_BackgroundColor
#06c
--pf-c-table__expandable-row--before--Bottomc_table__expandable_row_before_Bottom
calc(1px*-1)
--pf-c-table__expandable-row--before--Topc_table__expandable_row_before_Top
calc(1px*-1)
--pf-c-table__expandable-row--before--Widthc_table__expandable_row_before_Width
3px
--pf-c-table__expandable-row--before--ZIndexc_table__expandable_row_before_ZIndex
200
--pf-c-table__expandable-row-content--BackgroundColorc_table__expandable_row_content_BackgroundColor
#fff
--pf-c-table__expandable-row-content--PaddingBottomc_table__expandable_row_content_PaddingBottom
1.5rem
--pf-c-table__expandable-row-content--PaddingTopc_table__expandable_row_content_PaddingTop
1.5rem
--pf-c-table__expandable-row-content--responsive--PaddingLeftc_table__expandable_row_content_responsive_PaddingLeft
1.5rem
--pf-c-table__expandable-row-content--responsive--PaddingRightc_table__expandable_row_content_responsive_PaddingRight
1.5rem
--pf-c-table__expandable-row-content--Transitionc_table__expandable_row_content_Transition
all 250ms ease-in-out
--pf-c-table__expandable-row--m-expanded--BorderBottomColorc_table__expandable_row_m_expanded_BorderBottomColor
#fff
--pf-c-table__expandable-row--m-expanded--BoxShadowc_table__expandable_row_m_expanded_BoxShadow
0 0.3125rem 0.625rem -0.25rem rgba(3,3,3,0.25)
--pf-c-table__expandable-row--MaxHeightc_table__expandable_row_MaxHeight
28.125rem
--pf-c-table__expandable-row--Transitionc_table__expandable_row_Transition
all 250ms ease-in-out
--pf-c-table__icon-inline--MarginRightc_table__icon_inline_MarginRight
0.5rem
--pf-c-table__sort--c-button--Colorc_table__sort_c_button_Color
#151515
--pf-c-table__sort-indicator--Colorc_table__sort_indicator_Color
#d2d2d2
--pf-c-table__sort-indicator--hover--Colorc_table__sort_indicator_hover_Color
#151515
--pf-c-table__sort-indicator--MarginLeftc_table__sort_indicator_MarginLeft
1rem
--pf-c-table__sort--sorted--Colorc_table__sort_sorted_Color
#06c
--pf-c-table__toggle__icon--Transitionc_table__toggle__icon_Transition
.2s ease-in 0s
--pf-c-table__toggle--c-button__toggle-icon--Transformc_table__toggle_c_button__toggle_icon_Transform
rotate(270deg)
--pf-c-table__toggle--c-button__toggle-icon--Transitionc_table__toggle_c_button__toggle_icon_Transition
.2s ease-in 0s
--pf-c-table__toggle--c-button--m-expanded__toggle-icon--Transformc_table__toggle_c_button_m_expanded__toggle_icon_Transform
rotate(360deg)
--pf-c-table__toggle--c-button--MarginTopc_table__toggle_c_button_MarginTop
-0.375rem
--pf-c-table__toggle--m-expanded__icon--Transformc_table__toggle_m_expanded__icon_Transform
rotate(180deg)
--pf-c-table--BackgroundColorc_table_BackgroundColor
#fff
--pf-c-table--BorderColorc_table_BorderColor
transparent
--pf-c-table--BorderWidthc_table_BorderWidth
0
--pf-c-table-caption--Colorc_table_caption_Color
#737679
--pf-c-table-caption--FontSizec_table_caption_FontSize
0.875rem
--pf-c-table-caption--md--PaddingLeftc_table_caption_md_PaddingLeft
1rem
--pf-c-table-caption--md--PaddingRightc_table_caption_md_PaddingRight
1rem
--pf-c-table-caption--PaddingBottomc_table_caption_PaddingBottom
1rem
--pf-c-table-caption--PaddingLeftc_table_caption_PaddingLeft
1.5rem
--pf-c-table-caption--PaddingRightc_table_caption_PaddingRight
1.5rem
--pf-c-table-caption--PaddingTopc_table_caption_PaddingTop
1rem
--pf-c-table-cell--first-last-child--PaddingLeftc_table_cell_first_last_child_PaddingLeft
1.5rem
--pf-c-table-cell--first-last-child--PaddingRightc_table_cell_first_last_child_PaddingRight
1.5rem
--pf-c-table-cell--FontSizec_table_cell_FontSize
0.875rem
--pf-c-table-cell--hidden-visible--Displayc_table_cell_hidden_visible_Display
table-cell
--pf-c-table-cell--m-grid--hidden-visible--Displayc_table_cell_m_grid_hidden_visible_Display
grid
--pf-c-table-cell--PaddingBottomc_table_cell_PaddingBottom
0
--pf-c-table-cell--PaddingLeftc_table_cell_PaddingLeft
4rem
--pf-c-table-cell--PaddingRightc_table_cell_PaddingRight
4rem
--pf-c-table-cell--PaddingTopc_table_cell_PaddingTop
0
--pf-c-table-cell--responsive--PaddingBottomc_table_cell_responsive_PaddingBottom
0
--pf-c-table-cell--responsive--PaddingLeftc_table_cell_responsive_PaddingLeft
0
--pf-c-table-cell--responsive--PaddingRightc_table_cell_responsive_PaddingRight
0
--pf-c-table-cell--responsive--PaddingTopc_table_cell_responsive_PaddingTop
0
--pf-c-table-cell-th--responsive--PaddingTopc_table_cell_th_responsive_PaddingTop
0.5rem
--pf-c-table--FontWeightc_table_FontWeight
700
--pf-c-table--m-compact__expandable-row-content--PaddingBottomc_table_m_compact__expandable_row_content_PaddingBottom
1.5rem
--pf-c-table--m-compact__expandable-row-content--PaddingLeftc_table_m_compact__expandable_row_content_PaddingLeft
1.5rem
--pf-c-table--m-compact__expandable-row-content--PaddingRightc_table_m_compact__expandable_row_content_PaddingRight
1.5rem
--pf-c-table--m-compact__expandable-row-content--PaddingTopc_table_m_compact__expandable_row_content_PaddingTop
1.5rem
--pf-c-table--m-compact__toggle--PaddingBottomc_table_m_compact__toggle_PaddingBottom
0
--pf-c-table--m-compact__toggle--PaddingTopc_table_m_compact__toggle_PaddingTop
0
--pf-c-table--m-compact-cell--first-last-child--PaddingLeftc_table_m_compact_cell_first_last_child_PaddingLeft
1.5rem
--pf-c-table--m-compact-cell--first-last-child--PaddingRightc_table_m_compact_cell_first_last_child_PaddingRight
1.5rem
--pf-c-table--m-compact-cell--PaddingBottomc_table_m_compact_cell_PaddingBottom
1rem
--pf-c-table--m-compact-cell--PaddingLeftc_table_m_compact_cell_PaddingLeft
0.5rem
--pf-c-table--m-compact-cell--PaddingRightc_table_m_compact_cell_PaddingRight
0.5rem
--pf-c-table--m-compact-cell--PaddingTopc_table_m_compact_cell_PaddingTop
1rem
--pf-c-table--m-compact--FontSizec_table_m_compact_FontSize
0.875rem
--pf-c-table--m-compact-th--PaddingBottomc_table_m_compact_th_PaddingBottom
1rem
--pf-c-table--m-compact-th--PaddingTopc_table_m_compact_th_PaddingTop
1rem
--pf-c-table--m-compact-tr-td--responsive--PaddingBottomc_table_m_compact_tr_td_responsive_PaddingBottom
0.5rem
--pf-c-table--m-compact-tr-td--responsive--PaddingTopc_table_m_compact_tr_td_responsive_PaddingTop
0.5rem
--pf-c-table--nested--first-last-child--PaddingLeftc_table_nested_first_last_child_PaddingLeft
4rem
--pf-c-table--nested--first-last-child--PaddingRightc_table_nested_first_last_child_PaddingRight
4rem
--pf-c-table--responsive--BorderColorc_table_responsive_BorderColor
#ededed
--pf-c-table-tbody-cell--PaddingBottomc_table_tbody_cell_PaddingBottom
1.5rem
--pf-c-table-tbody-cell--PaddingTopc_table_tbody_cell_PaddingTop
1.5rem
--pf-c-table-tbody--m-expanded--before--Topc_table_tbody_m_expanded_before_Top
0.5rem
--pf-c-table-tbody--responsive--BorderWidthc_table_tbody_responsive_BorderWidth
0.5rem
--pf-c-table-tbody--responsive--MarginTopc_table_tbody_responsive_MarginTop
0.25rem
--pf-c-table-td--responsive--GridColumnGapc_table_td_responsive_GridColumnGap
1rem
--pf-c-table-thead-cell--PaddingBottomc_table_thead_cell_PaddingBottom
1rem
--pf-c-table-thead-cell--PaddingTopc_table_thead_cell_PaddingTop
1rem
--pf-c-table-thead--FontSizec_table_thead_FontSize
0.875rem
--pf-c-table-thead--FontWeightc_table_thead_FontWeight
700
--pf-c-table-tr--responsive--BorderWidthc_table_tr_responsive_BorderWidth
0.5rem
--pf-c-table-tr--responsive--GridColumnGapc_table_tr_responsive_GridColumnGap
1rem
--pf-c-table-tr--responsive--last-child--BorderWidthc_table_tr_responsive_last_child_BorderWidth
1px
--pf-c-table-tr--responsive--MarginTopc_table_tr_responsive_MarginTop
0.5rem
--pf-c-table-tr--responsive--md--PaddingLeftc_table_tr_responsive_md_PaddingLeft
1rem
--pf-c-table-tr--responsive--md--PaddingRightc_table_tr_responsive_md_PaddingRight
1rem
--pf-c-table-tr--responsive--nested-table--PaddingBottomc_table_tr_responsive_nested_table_PaddingBottom
2rem
--pf-c-table-tr--responsive--nested-table--PaddingLeftc_table_tr_responsive_nested_table_PaddingLeft
1.5rem
--pf-c-table-tr--responsive--nested-table--PaddingRightc_table_tr_responsive_nested_table_PaddingRight
1.5rem
--pf-c-table-tr--responsive--nested-table--PaddingTopc_table_tr_responsive_nested_table_PaddingTop
2rem
--pf-c-table-tr--responsive--PaddingBottomc_table_tr_responsive_PaddingBottom
2rem
--pf-c-table-tr--responsive--PaddingLeftc_table_tr_responsive_PaddingLeft
1.5rem
--pf-c-table-tr--responsive--PaddingRightc_table_tr_responsive_PaddingRight
1.5rem
--pf-c-table-tr--responsive--PaddingTopc_table_tr_responsive_PaddingTop
0