@patternfly/patternfly 5.0.0-alpha.2 → 5.0.0-alpha.21

package/docs/components/Table/examples/Table.md

@@ -67,19 +67,19 @@ cssPrefix: pf-c-table
 
 ### Basic table accessibility
 
-| Attribute                       | Applied to    | Outcome                                                                                                                                                   |
-| ------------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `role="grid"`                   | `.pf-c-table` | Identifies the element that serves as the grid widget container. **Required**                                                                             |
-| `aria-label`                    | `.pf-c-table` | Provides 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.                                                     |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `role="grid"` | `.pf-c-table` | Identifies the element that serves as the grid widget container. **Required** |
+| `aria-label` | `.pf-c-table` | Provides 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. |
 
 ### Basic table usage
 
-| Class                  | Applied to     | Outcome                                 |
-| ---------------------- | -------------- | --------------------------------------- |
-| `.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.   |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.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. |
 
 ## Responsive table behavior
 
@@ -87,10 +87,10 @@ cssPrefix: pf-c-table
 
 These classes can be used to ensure that the table changes between the tabular and grid-based layout at an appropriate screen width.
 
-| Class                                                               | Applied to    | Outcome                                                                                                                                                              |
-| ------------------------------------------------------------------- | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
 | `.pf-m-grid-md`, `.pf-m-grid-lg`, `.pf-m-grid-xl`, `.pf-m-grid-2xl` | `.pf-c-table` | Changes tabular layout to responsive, grid based layout at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
-| `.pf-m-grid`                                                        | `.pf-c-table` | Changes tabular layout to responsive, grid based layout. This approach requires JavaScript to set this class at some prescribed viewport width value.                |
+| `.pf-m-grid` | `.pf-c-table` | Changes tabular layout to responsive, grid based layout. This approach requires JavaScript to set this class at some prescribed viewport width value. |
 
 ## Sortable
 
@@ -218,23 +218,23 @@ These classes can be used to ensure that the table changes between the tabular a
 
 ### Sortable accessibility
 
-| Attribute                             | Applied to          | Outcome                                                                                                                                                                    |
-| ------------------------------------- | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
 | `aria-sort=[ascending or descending]` | `.pf-c-table__sort` | Indicates 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** |
 
 ### Sortable usage
 
-| Class                         | Applied to                                                                     | Outcome                                                                                                                                                                                                                            |
-| ----------------------------- | ------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `.pf-c-table__sort`           | `<th>`                                                                         | Initiates a table header sort cell. **Required for sortable table columns**                                                                                                                                                        |
-| `.pf-c-table__button`         | `<button>`, `<a>`                                                              | Initiates a table header sort cell button. If sorting a table row generates a unique URL that can be used as the `href` value for this element, use an `<a>`. Otherwise, use a `<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 support`display: grid`.                                              |
-| `.pf-c-table__sort-indicator` | `.pf-c-table__sort > .pf-c-table__button > span`                               | Initiates a sort indicator. **Required for sortable table columns**                                                                                                                                                                |
-| `.pf-m-selected`              | `.pf-c-table__sort`                                                            | Modifies for sort selected state. **Required for sortable table columns**                                                                                                                                                          |
-| `.pf-m-help`                  | `.pf-c-table__sort`, `.pf-c-table th`                                          | Modifies a sortable table header to accommodate a help tooltip. **Required for sortable table columns with help tooltips**                                                                                                         |
-| `.fa-arrows-alt-v`            | `.pf-c-table__sort > .pf-c-table__button > .pf-c-table__sort-indicator > .fas` | Initiates icon within unsorted, sortable table header. **Required for sortable table columns**                                                                                                                                     |
-| `.fa-long-arrow-alt-up`       | `.pf-c-table__sort > .pf-c-table__button > .pf-c-table__sort-indicator > .fas` | Initiates icon within ascending sorted and selected, sortable table header. **Required for sortable table columns**                                                                                                                |
-| `.fa-long-arrow-alt-down`     | `.pf-c-table__sort > .pf-c-table__button > .pf-c-table__sort-indicator > .fas` | Initiates icon within descending sorted and selected, sortable table header. **Required for sortable table columns**                                                                                                               |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-table__sort` | `<th>` | Initiates a table header sort cell. **Required for sortable table columns** |
+| `.pf-c-table__button` | `<button>`, `<a>` | Initiates a table header sort cell button. If sorting a table row generates a unique URL that can be used as the `href` value for this element, use an `<a>`. Otherwise, use a `<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 support`display: grid`. |
+| `.pf-c-table__sort-indicator` | `.pf-c-table__sort > .pf-c-table__button > span` | Initiates a sort indicator. **Required for sortable table columns** |
+| `.pf-m-selected` | `.pf-c-table__sort` | Modifies for sort selected state. **Required for sortable table columns** |
+| `.pf-m-help` | `.pf-c-table__sort`, `.pf-c-table th` | Modifies a sortable table header to accommodate a help tooltip. **Required for sortable table columns with help tooltips** |
+| `.fa-arrows-alt-v` | `.pf-c-table__sort > .pf-c-table__button > .pf-c-table__sort-indicator > .fas` | Initiates icon within unsorted, sortable table header. **Required for sortable table columns** |
+| `.fa-long-arrow-alt-up` | `.pf-c-table__sort > .pf-c-table__button > .pf-c-table__sort-indicator > .fas` | Initiates icon within ascending sorted and selected, sortable table header. **Required for sortable table columns** |
+| `.fa-long-arrow-alt-down` | `.pf-c-table__sort > .pf-c-table__button > .pf-c-table__sort-indicator > .fas` | Initiates icon within descending sorted and selected, sortable table header. **Required for sortable table columns** |
 
 ### Overflow menu usage, desktop
 
@@ -515,11 +515,14 @@ These classes can be used to ensure that the table changes between the tabular a
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-checkboxes-and-actions-checkrowthead"
-            aria-label="Select all rows"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-checkboxes-and-actions-checkrowthead"
+              aria-label="Select all rows"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" scope="col">Repositories</th>
@@ -535,11 +538,14 @@ These classes can be used to ensure that the table changes between the tabular a
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-checkboxes-and-actions-checkrow1"
-            aria-labelledby="table-checkboxes-and-actions-node1"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-checkboxes-and-actions-checkrow1"
+              aria-labelledby="table-checkboxes-and-actions-node1"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -598,11 +604,14 @@ These classes can be used to ensure that the table changes between the tabular a
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-checkboxes-and-actions-checkrow2"
-            aria-labelledby="table-checkboxes-and-actions-node2"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-checkboxes-and-actions-checkrow2"
+              aria-labelledby="table-checkboxes-and-actions-node2"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -662,11 +671,14 @@ These classes can be used to ensure that the table changes between the tabular a
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-checkboxes-and-actions-checkrow3"
-            aria-labelledby="table-checkboxes-and-actions-node3"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-checkboxes-and-actions-checkrow3"
+              aria-labelledby="table-checkboxes-and-actions-node3"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -726,11 +738,14 @@ These classes can be used to ensure that the table changes between the tabular a
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-checkboxes-and-actions-checkrow4"
-            aria-labelledby="table-checkboxes-and-actions-node4"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-checkboxes-and-actions-checkrow4"
+              aria-labelledby="table-checkboxes-and-actions-node4"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -816,11 +831,14 @@ These classes can be used to ensure that the table changes between the tabular a
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="radio"
-            name="table-single-select-radio-radio"
-            aria-labelledby="table-single-select-radio-node1"
-          />
+          <div class="pf-c-radio pf-m-standalone">
+            <input
+              class="pf-c-radio__input"
+              type="radio"
+              name="table-single-select-radio-radio"
+              aria-labelledby="table-single-select-radio-node1"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -879,11 +897,14 @@ These classes can be used to ensure that the table changes between the tabular a
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="radio"
-            name="table-single-select-radio-radio"
-            aria-labelledby="table-single-select-radio-node2"
-          />
+          <div class="pf-c-radio pf-m-standalone">
+            <input
+              class="pf-c-radio__input"
+              type="radio"
+              name="table-single-select-radio-radio"
+              aria-labelledby="table-single-select-radio-node2"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -943,11 +964,14 @@ These classes can be used to ensure that the table changes between the tabular a
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="radio"
-            name="table-single-select-radio-radio"
-            aria-labelledby="table-single-select-radio-node3"
-          />
+          <div class="pf-c-radio pf-m-standalone">
+            <input
+              class="pf-c-radio__input"
+              type="radio"
+              name="table-single-select-radio-radio"
+              aria-labelledby="table-single-select-radio-node3"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -1007,11 +1031,14 @@ These classes can be used to ensure that the table changes between the tabular a
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="radio"
-            name="table-single-select-radio-radio"
-            aria-labelledby="table-single-select-radio-node4"
-          />
+          <div class="pf-c-radio pf-m-standalone">
+            <input
+              class="pf-c-radio__input"
+              type="radio"
+              name="table-single-select-radio-radio"
+              aria-labelledby="table-single-select-radio-node4"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -1078,18 +1105,18 @@ When header cells are empty or they contain interactive elements, `<th>` should
 
 ### Checkboxes, radio select, and actions accessibility
 
-| Attribute                                                               | Applied to                 | Outcome                                                                                                                              |
-| ----------------------------------------------------------------------- | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
-| `aria-labelledby="[row_header_id]"` or `aria-label="[descriptive text]` | `.pf-c-table__check input` | Provides an accessible name for the checkbox or radio input. **Required**                                                            |
-| `id`                                                                    | row header `<th> > *`      | Provides an accessible description for the checkbox or radio. **Required if using `aria-labelledby` for `.pf-c-table__check input`** |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `aria-labelledby="[row_header_id]"` or `aria-label="[descriptive text]` | `.pf-c-table__check input` | Provides an accessible name for the checkbox or radio input. **Required** |
+| `id` | row header `<th> > *` | Provides an accessible description for the checkbox or radio. **Required if using `aria-labelledby` for `.pf-c-table__check input`** |
 
 ### Checkboxes, radio select, and actions usage
 
-| Class                             | Applied to     | Outcome                                         |
-| --------------------------------- | -------------- | ----------------------------------------------- |
-| `.pf-c-table__check`              | `<th>`, `<td>` | Initiates a checkbox or radio input 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.     |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-table__check` | `<th>`, `<td>` | Initiates a checkbox or radio input 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
 
@@ -1120,11 +1147,14 @@ Note: Table column widths will respond automatically when toggling expanded rows
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-expandable-checkrowthead"
-            aria-label="Select all rows"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-expandable-checkrowthead"
+              aria-label="Select all rows"
+            />
+          </div>
         </label>
       </td>
       <th
@@ -1196,11 +1226,14 @@ Note: Table column widths will respond automatically when toggling expanded rows
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-expandable-checkrow1"
-            aria-labelledby="table-expandable-node1"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-expandable-checkrow1"
+              aria-labelledby="table-expandable-node1"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -1288,11 +1321,14 @@ Note: Table column widths will respond automatically when toggling expanded rows
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-expandable-checkrow2"
-            aria-labelledby="table-expandable-node2"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-expandable-checkrow2"
+              aria-labelledby="table-expandable-node2"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -1378,11 +1414,14 @@ Note: Table column widths will respond automatically when toggling expanded rows
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-expandable-checkrow3"
-            aria-labelledby="table-expandable-node3"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-expandable-checkrow3"
+              aria-labelledby="table-expandable-node3"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -1468,11 +1507,14 @@ Note: Table column widths will respond automatically when toggling expanded rows
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-expandable-checkrow4"
-            aria-labelledby="table-expandable-node4"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-expandable-checkrow4"
+              aria-labelledby="table-expandable-node4"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -1573,11 +1615,14 @@ Note: Table column widths will respond automatically when toggling expanded rows
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="expandable-set-width-columns-example-checkrowthead"
-            aria-label="Select all rows"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="expandable-set-width-columns-example-checkrowthead"
+              aria-label="Select all rows"
+            />
+          </div>
         </label>
       </td>
       <th
@@ -1649,11 +1694,14 @@ Note: Table column widths will respond automatically when toggling expanded rows
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="expandable-set-width-columns-example-checkrow1"
-            aria-labelledby="expandable-set-width-columns-example-node1"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="expandable-set-width-columns-example-checkrow1"
+              aria-labelledby="expandable-set-width-columns-example-node1"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -1746,11 +1794,14 @@ Note: Table column widths will respond automatically when toggling expanded rows
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="expandable-set-width-columns-example-checkrow2"
-            aria-labelledby="expandable-set-width-columns-example-node2"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="expandable-set-width-columns-example-checkrow2"
+              aria-labelledby="expandable-set-width-columns-example-node2"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -1844,11 +1895,14 @@ Note: Table column widths will respond automatically when toggling expanded rows
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="expandable-set-width-columns-example-checkrow3"
-            aria-labelledby="expandable-set-width-columns-example-node3"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="expandable-set-width-columns-example-checkrow3"
+              aria-labelledby="expandable-set-width-columns-example-node3"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -1938,11 +1992,14 @@ Note: Table column widths will respond automatically when toggling expanded rows
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="expandable-set-width-columns-example-checkrow4"
-            aria-labelledby="expandable-set-width-columns-example-node4"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="expandable-set-width-columns-example-checkrow4"
+              aria-labelledby="expandable-set-width-columns-example-node4"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -2045,11 +2102,14 @@ Note: Table column widths will respond automatically when toggling expanded rows
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-expandable-nested-table-checkrowthead"
-            aria-label="Select all rows"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-expandable-nested-table-checkrowthead"
+              aria-label="Select all rows"
+            />
+          </div>
         </label>
       </td>
       <th
@@ -2121,11 +2181,14 @@ Note: Table column widths will respond automatically when toggling expanded rows
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-expandable-nested-table-checkrow1"
-            aria-labelledby="table-expandable-nested-table-node1"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-expandable-nested-table-checkrow1"
+              aria-labelledby="table-expandable-nested-table-node1"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -2264,11 +2327,14 @@ Note: Table column widths will respond automatically when toggling expanded rows
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-expandable-nested-table-checkrow2"
-            aria-labelledby="table-expandable-nested-table-node2"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-expandable-nested-table-checkrow2"
+              aria-labelledby="table-expandable-nested-table-node2"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -2359,11 +2425,14 @@ Note: Table column widths will respond automatically when toggling expanded rows
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-expandable-nested-table-checkrow3"
-            aria-labelledby="table-expandable-nested-table-node3"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-expandable-nested-table-checkrow3"
+              aria-labelledby="table-expandable-nested-table-node3"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -2454,11 +2523,14 @@ Note: Table column widths will respond automatically when toggling expanded rows
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-expandable-nested-table-checkrow4"
-            aria-labelledby="table-expandable-nested-table-node4"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-expandable-nested-table-checkrow4"
+              aria-labelledby="table-expandable-nested-table-node4"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -2537,24 +2609,24 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
 ### Expandable accessibility
 
-| Attribute                                             | Applied to                             | Outcome                                                                       |
-| ----------------------------------------------------- | -------------------------------------- | ----------------------------------------------------------------------------- |
-| `hidden`                                              | `.pf-c-table__expandable-row`          | Indicates that the expandable content is hidden. **Required**                 |
-| `aria-expanded="true"`                                | `.pf-c-table__toggle` > `.pf-c-button` | Indicates that the row is visible. **Required**                               |
-| `aria-label="[descriptive text]"`                     | `.pf-c-table__toggle` > `.pf-c-button` | Provides an accessible name for toggle button. **Required**                   |
-| `aria-labelledby="[title_cell_id] [button_id]"`       | `.pf-c-table__toggle` > `.pf-c-button` | Provides an accessible description for toggle button. **Required**            |
-| `id="[button_id]"`                                    | `.pf-c-table__toggle` > `.pf-c-button` | Provides a reference for toggle button description. **Required**              |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `hidden` | `.pf-c-table__expandable-row` | Indicates that the expandable content is hidden. **Required** |
+| `aria-expanded="true"` | `.pf-c-table__toggle` > `.pf-c-button` | Indicates that the row is visible. **Required**|
+| `aria-label="[descriptive text]"` | `.pf-c-table__toggle` > `.pf-c-button` | Provides an accessible name for toggle button. **Required**|
+| `aria-labelledby="[title_cell_id] [button_id]"` | `.pf-c-table__toggle` > `.pf-c-button` | Provides an accessible description for toggle button. **Required** |
+| `id="[button_id]"` | `.pf-c-table__toggle` > `.pf-c-button` | Provides a reference for toggle button description. **Required** |
 | `aria-controls="[id of element the button controls]"` | `.pf-c-table__toggle` > `.pf-c-button` | Identifies the expanded content controlled by the toggle button. **Required** |
 
 ### Expandable usage
 
-| Class                                 | Applied to                                                            | Outcome                                         |
-| ------------------------------------- | --------------------------------------------------------------------- | ----------------------------------------------- |
-| `.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-row` | Modifies for expanded state.                    |
-| `.pf-m-no-padding`                    | `.pf-c-table__expandable-row` > `<td>`                                | Modifies the expandable row to have no padding. |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.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-row` | Modifies for expanded state. |
+| `.pf-m-no-padding` | `.pf-c-table__expandable-row` > `<td>` | Modifies the expandable row to have no padding. |
 
 ## Compound expansion
 
@@ -5868,19 +5940,19 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
 ### Compound expansion accessibility
 
-| Attribute                                             | Applied to                                                | Outcome                                                                       |
-| ----------------------------------------------------- | --------------------------------------------------------- | ----------------------------------------------------------------------------- |
-| `hidden`                                              | `.pf-c-table__expandable-row`                             | Indicates that the expandable content is hidden. **Required**                 |
-| `aria-expanded="true"`                                | `.pf-c-table__compound-expansion-toggle` > `.pf-c-button` | Indicates that the row is visible. **Required**                               |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `hidden` | `.pf-c-table__expandable-row` | Indicates that the expandable content is hidden. **Required** |
+| `aria-expanded="true"` | `.pf-c-table__compound-expansion-toggle` > `.pf-c-button` | Indicates that the row is visible. **Required**|
 | `aria-controls="[id of element the button controls]"` | `.pf-c-table__compound-expansion-toggle` > `.pf-c-button` | Identifies the expanded content controlled by the toggle button. **Required** |
 
 ### Compound expansion usage
 
-| Class                                    | Applied to                                                           | Outcome                                            |
-| ---------------------------------------- | -------------------------------------------------------------------- | -------------------------------------------------- |
-| `.pf-c-table__control-row`               | `.pf-c-table__expandable > <tr>`                                     | Modifies a compound expandable table control row.  |
-| `.pf-m-expanded`                         | `<tbody>`, `.pf-c-table__compound-expansion-toggle` > `.pf-c-button` | Modifies a tbody with a row and an expandable row. |
-| `.pf-c-table__compound-expansion-toggle` | `<td>`                                                               | Modifies a `<td>` on active/focus.                 |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-table__control-row` | `.pf-c-table__expandable > <tr>` | Modifies a compound expandable table control row. |
+| `.pf-m-expanded` | `<tbody>`, `.pf-c-table__compound-expansion-toggle` > `.pf-c-button` | Modifies a tbody with a row and an expandable row. |
+| `.pf-c-table__compound-expansion-toggle` | `<td>` | Modifies a `<td>` on active/focus. |
 
 ## Compact variant
 
@@ -5897,11 +5969,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-compact-checkrowthead"
-            aria-label="Select all rows"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-compact-checkrowthead"
+              aria-label="Select all rows"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" scope="col">Contributor</th>
@@ -5919,11 +5994,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-compact-checkrow1"
-            aria-labelledby="table-compact-node1"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-compact-checkrow1"
+              aria-labelledby="table-compact-node1"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -5988,11 +6066,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-compact-checkrow2"
-            aria-labelledby="table-compact-node2"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-compact-checkrow2"
+              aria-labelledby="table-compact-node2"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -6057,11 +6138,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-compact-checkrow3"
-            aria-labelledby="table-compact-node3"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-compact-checkrow3"
+              aria-labelledby="table-compact-node3"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -6126,11 +6210,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-compact-checkrow4"
-            aria-labelledby="table-compact-node4"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-compact-checkrow4"
+              aria-labelledby="table-compact-node4"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -6221,11 +6308,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-compact-expandable-checkrowthead"
-            aria-label="Select all rows"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-compact-expandable-checkrowthead"
+              aria-label="Select all rows"
+            />
+          </div>
         </label>
       </td>
       <th class="pf-m-width-30" role="columnheader" scope="col">Repositories</th>
@@ -6255,11 +6345,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-compact-expandable-checkrow1"
-            aria-labelledby="table-compact-expandable-node1"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-compact-expandable-checkrow1"
+              aria-labelledby="table-compact-expandable-node1"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -6346,11 +6439,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-compact-expandable-checkrow2"
-            aria-labelledby="table-compact-expandable-node2"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-compact-expandable-checkrow2"
+              aria-labelledby="table-compact-expandable-node2"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -6440,11 +6536,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-compact-expandable-checkrow3"
-            aria-labelledby="table-compact-expandable-node3"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-compact-expandable-checkrow3"
+              aria-labelledby="table-compact-expandable-node3"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -6529,11 +6628,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-compact-expandable-checkrow4"
-            aria-labelledby="table-compact-expandable-node4"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-compact-expandable-checkrow4"
+              aria-labelledby="table-compact-expandable-node4"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -6622,11 +6724,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-compact-expandable-checkrow5"
-            aria-labelledby="table-compact-expandable-node5"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-compact-expandable-checkrow5"
+              aria-labelledby="table-compact-expandable-node5"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -6711,11 +6816,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-compact-expandable-checkrow6"
-            aria-labelledby="table-compact-expandable-node6"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-compact-expandable-checkrow6"
+              aria-labelledby="table-compact-expandable-node6"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -6812,14 +6920,17 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-compact-expandable-checkrow7"
-            aria-labelledby="table-compact-expandable-node7"
-          />
-        </label>
-      </td>
-      <th role="columnheader" data-label="Data label name">
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-compact-expandable-checkrow7"
+              aria-labelledby="table-compact-expandable-node7"
+            />
+          </div>
+        </label>
+      </td>
+      <th role="columnheader" data-label="Data label name">
         <div id="table-compact-expandable-node7">Node 7</div>
       </th>
       <td role="cell" data-label="Branches">10</td>
@@ -6901,11 +7012,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-compact-expandable-checkrow8"
-            aria-labelledby="table-compact-expandable-node8"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-compact-expandable-checkrow8"
+              aria-labelledby="table-compact-expandable-node8"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -6999,11 +7113,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-compact-expandable-checkrow9"
-            aria-labelledby="table-compact-expandable-node9"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-compact-expandable-checkrow9"
+              aria-labelledby="table-compact-expandable-node9"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -7074,8 +7191,8 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
 ### Compact Usage
 
-| Class           | Applied to    | Outcome                       |
-| --------------- | ------------- | ----------------------------- |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
 | `.pf-m-compact` | `.pf-c-table` | Modifies for a compact table. |
 
 ## Hoverable and selected
@@ -7093,11 +7210,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-hoverable-checkrowthead"
-            aria-label="Select all rows"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-hoverable-checkrowthead"
+              aria-label="Select all rows"
+            />
+          </div>
         </label>
       </td>
       <th
@@ -7121,11 +7241,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
   <tr class="pf-m-hoverable" role="row" tabindex="0">
     <td class="pf-c-table__check" role="cell">
       <label>
-        <input
-          type="checkbox"
-          name="table-hoverable-checkrow1"
-          aria-labelledby="table-hoverable-node1"
-        />
+        <div class="pf-c-check pf-m-standalone">
+          <input
+            class="pf-c-check__input"
+            type="checkbox"
+            name="table-hoverable-checkrow1"
+            aria-labelledby="table-hoverable-node1"
+          />
+        </div>
       </label>
     </td>
     <th role="columnheader" data-label="Repository name">
@@ -7179,11 +7302,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
   <tr class="pf-m-hoverable pf-m-selected" role="row" tabindex="0">
     <td class="pf-c-table__check" role="cell">
       <label>
-        <input
-          type="checkbox"
-          name="table-hoverable-checkrow2"
-          aria-labelledby="table-hoverable-node2"
-        />
+        <div class="pf-c-check pf-m-standalone">
+          <input
+            class="pf-c-check__input"
+            type="checkbox"
+            name="table-hoverable-checkrow2"
+            aria-labelledby="table-hoverable-node2"
+          />
+        </div>
       </label>
     </td>
     <th role="columnheader" data-label="Repository name">
@@ -7239,11 +7365,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
   <tr class="pf-m-hoverable" role="row" tabindex="0">
     <td class="pf-c-table__check" role="cell">
       <label>
-        <input
-          type="checkbox"
-          name="table-hoverable-checkrow3"
-          aria-labelledby="table-hoverable-node3"
-        />
+        <div class="pf-c-check pf-m-standalone">
+          <input
+            class="pf-c-check__input"
+            type="checkbox"
+            name="table-hoverable-checkrow3"
+            aria-labelledby="table-hoverable-node3"
+          />
+        </div>
       </label>
     </td>
     <th role="columnheader" data-label="Repository name">
@@ -7297,11 +7426,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
   <tr class="pf-m-hoverable" role="row" tabindex="0">
     <td class="pf-c-table__check" role="cell">
       <label>
-        <input
-          type="checkbox"
-          name="table-hoverable-checkrow4"
-          aria-labelledby="table-hoverable-node4"
-        />
+        <div class="pf-c-check pf-m-standalone">
+          <input
+            class="pf-c-check__input"
+            type="checkbox"
+            name="table-hoverable-checkrow4"
+            aria-labelledby="table-hoverable-node4"
+          />
+        </div>
       </label>
     </td>
     <th role="columnheader" data-label="Repository name">
@@ -7355,11 +7487,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
   <tr class="pf-m-hoverable pf-m-selected" role="row" tabindex="0">
     <td class="pf-c-table__check" role="cell">
       <label>
-        <input
-          type="checkbox"
-          name="table-hoverable-checkrow5"
-          aria-labelledby="table-hoverable-node5"
-        />
+        <div class="pf-c-check pf-m-standalone">
+          <input
+            class="pf-c-check__input"
+            type="checkbox"
+            name="table-hoverable-checkrow5"
+            aria-labelledby="table-hoverable-node5"
+          />
+        </div>
       </label>
     </td>
     <th role="columnheader" data-label="Repository name">
@@ -7415,11 +7550,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
   <tr class="pf-m-hoverable pf-m-selected" role="row" tabindex="0">
     <td class="pf-c-table__check" role="cell">
       <label>
-        <input
-          type="checkbox"
-          name="table-hoverable-checkrow6"
-          aria-labelledby="table-hoverable-node6"
-        />
+        <div class="pf-c-check pf-m-standalone">
+          <input
+            class="pf-c-check__input"
+            type="checkbox"
+            name="table-hoverable-checkrow6"
+            aria-labelledby="table-hoverable-node6"
+          />
+        </div>
       </label>
     </td>
     <th role="columnheader" data-label="Repository name">
@@ -7475,11 +7613,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
   <tr class="pf-m-hoverable pf-m-selected" role="row" tabindex="0">
     <td class="pf-c-table__check" role="cell">
       <label>
-        <input
-          type="checkbox"
-          name="table-hoverable-checkrow7"
-          aria-labelledby="table-hoverable-node7"
-        />
+        <div class="pf-c-check pf-m-standalone">
+          <input
+            class="pf-c-check__input"
+            type="checkbox"
+            name="table-hoverable-checkrow7"
+            aria-labelledby="table-hoverable-node7"
+          />
+        </div>
       </label>
     </td>
     <th role="columnheader" data-label="Repository name">
@@ -7535,11 +7676,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
   <tr class="pf-m-hoverable" role="row" tabindex="0">
     <td class="pf-c-table__check" role="cell">
       <label>
-        <input
-          type="checkbox"
-          name="table-hoverable-checkrow8"
-          aria-labelledby="table-hoverable-node8"
-        />
+        <div class="pf-c-check pf-m-standalone">
+          <input
+            class="pf-c-check__input"
+            type="checkbox"
+            name="table-hoverable-checkrow8"
+            aria-labelledby="table-hoverable-node8"
+          />
+        </div>
       </label>
     </td>
     <th role="columnheader" data-label="Repository name">
@@ -7593,11 +7737,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
   <tr class="pf-m-hoverable" role="row" tabindex="0">
     <td class="pf-c-table__check" role="cell">
       <label>
-        <input
-          type="checkbox"
-          name="table-hoverable-checkrow9"
-          aria-labelledby="table-hoverable-node9"
-        />
+        <div class="pf-c-check pf-m-standalone">
+          <input
+            class="pf-c-check__input"
+            type="checkbox"
+            name="table-hoverable-checkrow9"
+            aria-labelledby="table-hoverable-node9"
+          />
+        </div>
       </label>
     </td>
     <th role="columnheader" data-label="Repository name">
@@ -7651,11 +7798,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
   <tr class="pf-m-hoverable pf-m-selected" role="row" tabindex="0">
     <td class="pf-c-table__check" role="cell">
       <label>
-        <input
-          type="checkbox"
-          name="table-hoverable-checkrow10"
-          aria-labelledby="table-hoverable-node10"
-        />
+        <div class="pf-c-check pf-m-standalone">
+          <input
+            class="pf-c-check__input"
+            type="checkbox"
+            name="table-hoverable-checkrow10"
+            aria-labelledby="table-hoverable-node10"
+          />
+        </div>
       </label>
     </td>
     <th role="columnheader" data-label="Repository name">
@@ -7711,11 +7861,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
   <tr class="pf-m-hoverable" role="row" tabindex="0">
     <td class="pf-c-table__check" role="cell">
       <label>
-        <input
-          type="checkbox"
-          name="table-hoverable-checkrow11"
-          aria-labelledby="table-hoverable-node11"
-        />
+        <div class="pf-c-check pf-m-standalone">
+          <input
+            class="pf-c-check__input"
+            type="checkbox"
+            name="table-hoverable-checkrow11"
+            aria-labelledby="table-hoverable-node11"
+          />
+        </div>
       </label>
     </td>
     <th role="columnheader" data-label="Repository name">
@@ -7784,11 +7937,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <td></td>
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-expandable-hoverable-checkrowthead"
-            aria-label="Select all rows"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-expandable-hoverable-checkrowthead"
+              aria-label="Select all rows"
+            />
+          </div>
         </label>
       </td>
       <th
@@ -7858,11 +8014,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-expandable-hoverable-checkrow1"
-            aria-labelledby="table-expandable-hoverable-node1"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-expandable-hoverable-checkrow1"
+              aria-labelledby="table-expandable-hoverable-node1"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Repository name">
@@ -7953,11 +8112,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-expandable-hoverable-checkrow2"
-            aria-labelledby="table-expandable-hoverable-node2"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-expandable-hoverable-checkrow2"
+              aria-labelledby="table-expandable-hoverable-node2"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Repository name">
@@ -8050,11 +8212,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-expandable-hoverable-checkrow3"
-            aria-labelledby="table-expandable-hoverable-node3"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-expandable-hoverable-checkrow3"
+              aria-labelledby="table-expandable-hoverable-node3"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Repository name">
@@ -8145,11 +8310,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-expandable-hoverable-checkrow4"
-            aria-labelledby="table-expandable-hoverable-node4"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-expandable-hoverable-checkrow4"
+              aria-labelledby="table-expandable-hoverable-node4"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Repository name">
@@ -8240,11 +8408,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-expandable-hoverable-checkrow5"
-            aria-labelledby="table-expandable-hoverable-node5"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-expandable-hoverable-checkrow5"
+              aria-labelledby="table-expandable-hoverable-node5"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Repository name">
@@ -8337,11 +8508,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-expandable-hoverable-checkrow6"
-            aria-labelledby="table-expandable-hoverable-node6"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-expandable-hoverable-checkrow6"
+              aria-labelledby="table-expandable-hoverable-node6"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Repository name">
@@ -8434,11 +8608,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-expandable-hoverable-checkrow7"
-            aria-labelledby="table-expandable-hoverable-node7"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-expandable-hoverable-checkrow7"
+              aria-labelledby="table-expandable-hoverable-node7"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Repository name">
@@ -8531,11 +8708,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-expandable-hoverable-checkrow8"
-            aria-labelledby="table-expandable-hoverable-node8"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-expandable-hoverable-checkrow8"
+              aria-labelledby="table-expandable-hoverable-node8"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Repository name">
@@ -8626,11 +8806,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-expandable-hoverable-checkrow9"
-            aria-labelledby="table-expandable-hoverable-node9"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-expandable-hoverable-checkrow9"
+              aria-labelledby="table-expandable-hoverable-node9"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Repository name">
@@ -8721,11 +8904,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-expandable-hoverable-checkrow10"
-            aria-labelledby="table-expandable-hoverable-node10"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-expandable-hoverable-checkrow10"
+              aria-labelledby="table-expandable-hoverable-node10"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Repository name">
@@ -8821,11 +9007,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-expandable-hoverable-checkrow11"
-            aria-labelledby="table-expandable-hoverable-node11"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-expandable-hoverable-checkrow11"
+              aria-labelledby="table-expandable-hoverable-node11"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Repository name">
@@ -8918,11 +9107,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-expandable-hoverable-checkrow12"
-            aria-labelledby="table-expandable-hoverable-node12"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-expandable-hoverable-checkrow12"
+              aria-labelledby="table-expandable-hoverable-node12"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Repository name">
@@ -9018,11 +9210,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-expandable-hoverable-checkrow13"
-            aria-labelledby="table-expandable-hoverable-node13"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-expandable-hoverable-checkrow13"
+              aria-labelledby="table-expandable-hoverable-node13"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Repository name">
@@ -9120,11 +9315,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-expandable-hoverable-checkrow15"
-            aria-labelledby="table-expandable-hoverable-node15"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-expandable-hoverable-checkrow15"
+              aria-labelledby="table-expandable-hoverable-node15"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Repository name">
@@ -9218,11 +9416,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-expandable-hoverable-checkrow14"
-            aria-labelledby="table-expandable-hoverable-node14"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-expandable-hoverable-checkrow14"
+              aria-labelledby="table-expandable-hoverable-node14"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Repository name">
@@ -9313,11 +9514,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-expandable-hoverable-checkrow16"
-            aria-labelledby="table-expandable-hoverable-node16"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-expandable-hoverable-checkrow16"
+              aria-labelledby="table-expandable-hoverable-node16"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Repository name">
@@ -9409,11 +9613,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-expandable-hoverable-checkrow17"
-            aria-labelledby="table-expandable-hoverable-node17"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-expandable-hoverable-checkrow17"
+              aria-labelledby="table-expandable-hoverable-node17"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Repository name">
@@ -9504,11 +9711,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-expandable-hoverable-checkrow18"
-            aria-labelledby="table-expandable-hoverable-node18"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-expandable-hoverable-checkrow18"
+              aria-labelledby="table-expandable-hoverable-node18"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Repository name">
@@ -9599,11 +9809,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-expandable-hoverable-checkrow19"
-            aria-labelledby="table-expandable-hoverable-node19"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-expandable-hoverable-checkrow19"
+              aria-labelledby="table-expandable-hoverable-node19"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Repository name">
@@ -9682,16 +9895,16 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
 ### Hoverable accessibility
 
-| Attribute      | Applied to                         | Outcome                                                                                                  |
-| -------------- | ---------------------------------- | -------------------------------------------------------------------------------------------------------- |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
 | `tabindex="0"` | `.pf-c-table tbody.pf-m-hoverable` | Inserts the hoverable table element into the tab order of the page so that it is focusable. **Required** |
 
 ### Hoverable and selected usage
 
-| Class             | Applied to                            | Outcome                                                         |
-| ----------------- | ------------------------------------- | --------------------------------------------------------------- |
-| `.pf-m-hoverable` | `.pf-c-table tbody`, `.pf-c-table tr` | Modifies a tbody or tr table element to be hoverable.           |
-| `.pf-m-selected`  | `.pf-c-table tbody`, `.pf-c-table tr` | Modifies a selectable tbody or tr table element to be selected. |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-m-hoverable` | `.pf-c-table tbody`, `.pf-c-table tr` | Modifies a tbody or tr table element to be hoverable. |
+| `.pf-m-selected` | `.pf-c-table tbody`, `.pf-c-table tr` | Modifies a selectable tbody or tr table element to be selected. |
 
 ## Tree table
 
@@ -11167,11 +11380,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
           </span>
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-example-checkrow-1"
-                aria-labelledby="tree-table-with-checkboxes-example-node-1"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-example-checkrow-1"
+                  aria-labelledby="tree-table-with-checkboxes-example-node-1"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -11267,11 +11483,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
           </span>
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-example-checkrow-2"
-                aria-labelledby="tree-table-with-checkboxes-example-node-2"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-example-checkrow-2"
+                  aria-labelledby="tree-table-with-checkboxes-example-node-2"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -11355,11 +11574,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-example-checkrow-3"
-                aria-labelledby="tree-table-with-checkboxes-example-node-3"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-example-checkrow-3"
+                  aria-labelledby="tree-table-with-checkboxes-example-node-3"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -11442,11 +11664,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-example-checkrow-4"
-                aria-labelledby="tree-table-with-checkboxes-example-node-4"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-example-checkrow-4"
+                  aria-labelledby="tree-table-with-checkboxes-example-node-4"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -11529,11 +11754,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-example-checkrow-5"
-                aria-labelledby="tree-table-with-checkboxes-example-node-5"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-example-checkrow-5"
+                  aria-labelledby="tree-table-with-checkboxes-example-node-5"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -11615,11 +11843,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-example-checkrow-6"
-                aria-labelledby="tree-table-with-checkboxes-example-node-6"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-example-checkrow-6"
+                  aria-labelledby="tree-table-with-checkboxes-example-node-6"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -11716,11 +11947,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
           </span>
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-example-checkrow-7"
-                aria-labelledby="tree-table-with-checkboxes-example-node-7"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-example-checkrow-7"
+                  aria-labelledby="tree-table-with-checkboxes-example-node-7"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -11802,11 +12036,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-example-checkrow-8"
-                aria-labelledby="tree-table-with-checkboxes-example-node-8"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-example-checkrow-8"
+                  aria-labelledby="tree-table-with-checkboxes-example-node-8"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -11902,11 +12139,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
           </span>
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-example-checkrow-9"
-                aria-labelledby="tree-table-with-checkboxes-example-node-9"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-example-checkrow-9"
+                  aria-labelledby="tree-table-with-checkboxes-example-node-9"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -11988,11 +12228,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-example-checkrow-10"
-                aria-labelledby="tree-table-with-checkboxes-example-node-10"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-example-checkrow-10"
+                  aria-labelledby="tree-table-with-checkboxes-example-node-10"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -12075,11 +12318,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-example-checkrow-11"
-                aria-labelledby="tree-table-with-checkboxes-example-node-11"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-example-checkrow-11"
+                  aria-labelledby="tree-table-with-checkboxes-example-node-11"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -12176,11 +12422,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
           </span>
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-example-checkrow-12"
-                aria-labelledby="tree-table-with-checkboxes-example-node-12"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-example-checkrow-12"
+                  aria-labelledby="tree-table-with-checkboxes-example-node-12"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -12262,11 +12511,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-example-checkrow-13"
-                aria-labelledby="tree-table-with-checkboxes-example-node-13"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-example-checkrow-13"
+                  aria-labelledby="tree-table-with-checkboxes-example-node-13"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -12348,11 +12600,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-example-checkrow-14"
-                aria-labelledby="tree-table-with-checkboxes-example-node-14"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-example-checkrow-14"
+                  aria-labelledby="tree-table-with-checkboxes-example-node-14"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -12448,11 +12703,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
           </span>
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-example-checkrow-15"
-                aria-labelledby="tree-table-with-checkboxes-example-node-15"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-example-checkrow-15"
+                  aria-labelledby="tree-table-with-checkboxes-example-node-15"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -12535,11 +12793,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-example-checkrow-16"
-                aria-labelledby="tree-table-with-checkboxes-example-node-16"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-example-checkrow-16"
+                  aria-labelledby="tree-table-with-checkboxes-example-node-16"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -12622,11 +12883,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-example-checkrow-17"
-                aria-labelledby="tree-table-with-checkboxes-example-node-17"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-example-checkrow-17"
+                  aria-labelledby="tree-table-with-checkboxes-example-node-17"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -12746,11 +13010,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
           </span>
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-icons-example-checkrow-1"
-                aria-labelledby="tree-table-with-checkboxes-icons-example-node-1"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-icons-example-checkrow-1"
+                  aria-labelledby="tree-table-with-checkboxes-icons-example-node-1"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -12849,11 +13116,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
           </span>
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-icons-example-checkrow-2"
-                aria-labelledby="tree-table-with-checkboxes-icons-example-node-2"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-icons-example-checkrow-2"
+                  aria-labelledby="tree-table-with-checkboxes-icons-example-node-2"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -12940,11 +13210,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-icons-example-checkrow-3"
-                aria-labelledby="tree-table-with-checkboxes-icons-example-node-3"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-icons-example-checkrow-3"
+                  aria-labelledby="tree-table-with-checkboxes-icons-example-node-3"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -13030,11 +13303,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-icons-example-checkrow-4"
-                aria-labelledby="tree-table-with-checkboxes-icons-example-node-4"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-icons-example-checkrow-4"
+                  aria-labelledby="tree-table-with-checkboxes-icons-example-node-4"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -13120,11 +13396,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-icons-example-checkrow-5"
-                aria-labelledby="tree-table-with-checkboxes-icons-example-node-5"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-icons-example-checkrow-5"
+                  aria-labelledby="tree-table-with-checkboxes-icons-example-node-5"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -13209,11 +13488,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-icons-example-checkrow-6"
-                aria-labelledby="tree-table-with-checkboxes-icons-example-node-6"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-icons-example-checkrow-6"
+                  aria-labelledby="tree-table-with-checkboxes-icons-example-node-6"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -13313,11 +13595,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
           </span>
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-icons-example-checkrow-7"
-                aria-labelledby="tree-table-with-checkboxes-icons-example-node-7"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-icons-example-checkrow-7"
+                  aria-labelledby="tree-table-with-checkboxes-icons-example-node-7"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -13402,11 +13687,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-icons-example-checkrow-8"
-                aria-labelledby="tree-table-with-checkboxes-icons-example-node-8"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-icons-example-checkrow-8"
+                  aria-labelledby="tree-table-with-checkboxes-icons-example-node-8"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -13505,11 +13793,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
           </span>
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-icons-example-checkrow-9"
-                aria-labelledby="tree-table-with-checkboxes-icons-example-node-9"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-icons-example-checkrow-9"
+                  aria-labelledby="tree-table-with-checkboxes-icons-example-node-9"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -13594,11 +13885,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-icons-example-checkrow-10"
-                aria-labelledby="tree-table-with-checkboxes-icons-example-node-10"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-icons-example-checkrow-10"
+                  aria-labelledby="tree-table-with-checkboxes-icons-example-node-10"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -13684,11 +13978,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-icons-example-checkrow-11"
-                aria-labelledby="tree-table-with-checkboxes-icons-example-node-11"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-icons-example-checkrow-11"
+                  aria-labelledby="tree-table-with-checkboxes-icons-example-node-11"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -13788,11 +14085,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
           </span>
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-icons-example-checkrow-12"
-                aria-labelledby="tree-table-with-checkboxes-icons-example-node-12"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-icons-example-checkrow-12"
+                  aria-labelledby="tree-table-with-checkboxes-icons-example-node-12"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -13877,11 +14177,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-icons-example-checkrow-13"
-                aria-labelledby="tree-table-with-checkboxes-icons-example-node-13"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-icons-example-checkrow-13"
+                  aria-labelledby="tree-table-with-checkboxes-icons-example-node-13"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -13966,11 +14269,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-icons-example-checkrow-14"
-                aria-labelledby="tree-table-with-checkboxes-icons-example-node-14"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-icons-example-checkrow-14"
+                  aria-labelledby="tree-table-with-checkboxes-icons-example-node-14"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -14067,13 +14373,16 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
               </div>
             </button>
           </span>
-          <span class="pf-c-table__check">
-            <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-icons-example-checkrow-15"
-                aria-labelledby="tree-table-with-checkboxes-icons-example-node-15"
-              />
+          <span class="pf-c-table__check">
+            <label>
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-icons-example-checkrow-15"
+                  aria-labelledby="tree-table-with-checkboxes-icons-example-node-15"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -14159,11 +14468,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-icons-example-checkrow-16"
-                aria-labelledby="tree-table-with-checkboxes-icons-example-node-16"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-icons-example-checkrow-16"
+                  aria-labelledby="tree-table-with-checkboxes-icons-example-node-16"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -14249,11 +14561,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
             <label>
-              <input
-                type="checkbox"
-                name="tree-table-with-checkboxes-icons-example-checkrow-17"
-                aria-labelledby="tree-table-with-checkboxes-icons-example-node-17"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  name="tree-table-with-checkboxes-icons-example-checkrow-17"
+                  aria-labelledby="tree-table-with-checkboxes-icons-example-node-17"
+                />
+              </div>
             </label>
           </span>
           <div class="pf-c-table__tree-view-text">
@@ -14333,30 +14648,30 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
 ### Tree table accessibility
 
-| Attribute                | Applied to                                    | Outcome                                                                                                                                                                                                                             |
-| ------------------------ | --------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `role="treegrid"`        | `.pf-c-table.pf-m-tree-view`                  | Identifies the `table` as a treegrid. **Place on the outermost `table` only**                                                                                                                                                       |
-| `role="row"`             | `.pf-c-table.pf-m-tree-view tr`               | Identifies the `tr` element as a `row`. The row role is not an implicit semantic for the tr element when in a treegrid.                                                                                                             |
-| `role="gridcell"`        | `.pf-c-table.pf-m-tree-view tr`               | Identifies the `td` as a gridcell. The `gridcell` role is not an implicit semantic for the td element when in a treegrid.                                                                                                           |
-| `tabindex="-1"`          | `.pf-c-table.pf-m-tree-view tr`               | Makes the element with the treeitem role focusable without including it in the tab sequence of the page.                                                                                                                            |
-| `tabindex="0"`           | `.pf-c-table.pf-m-tree-view tr`               | Includes the element with the treeitem role in the tab sequence. Only one treeitem in the tree has tabindex="0". When the user moves focus in the tree, the element included in the tab sequence changes to the element with focus. |
-| `aria-expanded="false"`  | `.pf-c-table.pf-m-tree-view tr`               | For an expandable item, indicates the parent node is closed, i.e., the descendant elements are not visible.                                                                                                                         |
-| `aria-expanded="true"`   | `.pf-c-table.pf-m-tree-view tr.pf-m-expanded` | Indicates the parent node is open, i.e., the descendant elements are visible.                                                                                                                                                       |
-| `aria-level="number"`    | `.pf-c-table.pf-m-tree-view tr`               | Defines the level of the row in the hierarchical treegrid structure. Counting is one-based. Root rows have aria-level=“1”.                                                                                                          |
-| `aria-setsize="number"`  | `.pf-c-table.pf-m-tree-view tr`               | Defines the number of rows in the set of rows that are in the same branch and at the same level within the hierarchy.                                                                                                               |
-| `aria-posinset="number"` | `.pf-c-table.pf-m-tree-view tr`               | Defines the position of the row within the set of other rows that are in the same branch and at the same level within the hierarchy. Counting is one-based, not zero-based.                                                         |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `role="treegrid"` | `.pf-c-table.pf-m-tree-view` | Identifies the `table` as a treegrid. **Place on the outermost `table` only** |
+| `role="row"` | `.pf-c-table.pf-m-tree-view tr` | Identifies the `tr` element as a `row`. The row role is not an implicit semantic for the tr element when in a treegrid. |
+| `role="gridcell"` | `.pf-c-table.pf-m-tree-view tr` | Identifies the `td` as a gridcell. The `gridcell` role is not an implicit semantic for the td element when in a treegrid. |
+| `tabindex="-1"` | `.pf-c-table.pf-m-tree-view tr` | Makes the element with the treeitem role focusable without including it in the tab sequence of the page. |
+| `tabindex="0"` | `.pf-c-table.pf-m-tree-view tr` | Includes the element with the treeitem role in the tab sequence. Only one treeitem in the tree has tabindex="0". When the user moves focus in the tree, the element included in the tab sequence changes to the element with focus. |
+| `aria-expanded="false"` | `.pf-c-table.pf-m-tree-view tr` | For an expandable item, indicates the parent node is closed, i.e., the descendant elements are not visible. |
+| `aria-expanded="true"` | `.pf-c-table.pf-m-tree-view tr.pf-m-expanded` | Indicates the parent node is open, i.e., the descendant elements are visible. |
+| `aria-level="number"` | `.pf-c-table.pf-m-tree-view tr` | Defines the level of the row in the hierarchical treegrid structure. Counting is one-based. Root rows have aria-level=“1”. |
+| `aria-setsize="number"` | `.pf-c-table.pf-m-tree-view tr` | Defines the number of rows in the set of rows that are in the same branch and at the same level within the hierarchy. |
+| `aria-posinset="number"` | `.pf-c-table.pf-m-tree-view tr` | Defines the position of the row within the set of other rows that are in the same branch and at the same level within the hierarchy. Counting is one-based, not zero-based. |
 
 ### Tree table usage
 
-| Class                                        | Applied  | Outcome                                                                 |
-| -------------------------------------------- | -------- | ----------------------------------------------------------------------- |
-| `.pf-c-table__tree-view-main`                | `<div>`  | Initiates a tree view table main container. **Required with tree view** |
-| `.pf-c-table__tree-view-text`                | `<div>`  | Initiates a tree view table text element. **Required with tree view**   |
-| `.pf-c-table__tree-view-icon`                | `<span>` | Initiates a tree view icon wrapper. **Required with tree view**         |
-| `.pf-c-table__tree-view-title-header-cell`   | `<th>`   | Initiates a tree view title header cell. **Required with tree view**    |
-| `.pf-c-table__tree-view-details-toggle`      | `<span>` | Initiates a tree view details toggle container.                         |
-| `.pf-c-table__tree-view-details-toggle-icon` | `<span>` | Initiates a tree view details toggle icon.                              |
-| `.pf-m-treeview-details-expanded`            | `<tr>`   | Modifies a tbody with a row and an expandable row.                      |
+| Class | Applied | Outcome |
+| -- | -- | -- |
+| `.pf-c-table__tree-view-main` | `<div>` | Initiates a tree view table main container. **Required with tree view** |
+| `.pf-c-table__tree-view-text` | `<div>` | Initiates a tree view table text element. **Required with tree view** |
+| `.pf-c-table__tree-view-icon` | `<span>` | Initiates a tree view icon wrapper. **Required with tree view** |
+| `.pf-c-table__tree-view-title-header-cell` | `<th>` | Initiates a tree view title header cell. **Required with tree view** |
+| `.pf-c-table__tree-view-details-toggle` | `<span>` | Initiates a tree view details toggle container. |
+| `.pf-c-table__tree-view-details-toggle-icon` | `<span>` | Initiates a tree view details toggle icon. |
+| `.pf-m-treeview-details-expanded` | `<tr>` | Modifies a tbody with a row and an expandable row. |
 
 ## Borderless variant
 
@@ -14373,11 +14688,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="borderless-table-checkrowthead"
-            aria-label="Select all rows"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="borderless-table-checkrowthead"
+              aria-label="Select all rows"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" scope="col">Contributor</th>
@@ -14395,11 +14713,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="borderless-table-checkrow1"
-            aria-labelledby="borderless-table-node1"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="borderless-table-checkrow1"
+              aria-labelledby="borderless-table-node1"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -14464,11 +14785,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="borderless-table-checkrow2"
-            aria-labelledby="borderless-table-node2"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="borderless-table-checkrow2"
+              aria-labelledby="borderless-table-node2"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -14533,11 +14857,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="borderless-table-checkrow3"
-            aria-labelledby="borderless-table-node3"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="borderless-table-checkrow3"
+              aria-labelledby="borderless-table-node3"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -14602,11 +14929,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="borderless-table-checkrow4"
-            aria-labelledby="borderless-table-node4"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="borderless-table-checkrow4"
+              aria-labelledby="borderless-table-node4"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -14685,11 +15015,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="borderless-compact-table-checkrowthead"
-            aria-label="Select all rows"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="borderless-compact-table-checkrowthead"
+              aria-label="Select all rows"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" scope="col">Contributor</th>
@@ -14707,11 +15040,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="borderless-compact-table-checkrow1"
-            aria-labelledby="borderless-compact-table-node1"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="borderless-compact-table-checkrow1"
+              aria-labelledby="borderless-compact-table-node1"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -14776,11 +15112,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="borderless-compact-table-checkrow2"
-            aria-labelledby="borderless-compact-table-node2"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="borderless-compact-table-checkrow2"
+              aria-labelledby="borderless-compact-table-node2"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -14845,11 +15184,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="borderless-compact-table-checkrow3"
-            aria-labelledby="borderless-compact-table-node3"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="borderless-compact-table-checkrow3"
+              aria-labelledby="borderless-compact-table-node3"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -14914,11 +15256,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="borderless-compact-table-checkrow4"
-            aria-labelledby="borderless-compact-table-node4"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="borderless-compact-table-checkrow4"
+              aria-labelledby="borderless-compact-table-node4"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -14998,11 +15343,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <td></td>
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="borderless-table-expandable-checkrowthead"
-            aria-label="Select all rows"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="borderless-table-expandable-checkrowthead"
+              aria-label="Select all rows"
+            />
+          </div>
         </label>
       </td>
       <th
@@ -15074,11 +15422,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="borderless-table-expandable-checkrow1"
-            aria-labelledby="borderless-table-expandable-node1"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="borderless-table-expandable-checkrow1"
+              aria-labelledby="borderless-table-expandable-node1"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -15171,11 +15522,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="borderless-table-expandable-checkrow2"
-            aria-labelledby="borderless-table-expandable-node2"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="borderless-table-expandable-checkrow2"
+              aria-labelledby="borderless-table-expandable-node2"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -15266,11 +15620,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="borderless-table-expandable-checkrow3"
-            aria-labelledby="borderless-table-expandable-node3"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="borderless-table-expandable-checkrow3"
+              aria-labelledby="borderless-table-expandable-node3"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -15361,11 +15718,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="borderless-table-expandable-checkrow4"
-            aria-labelledby="borderless-table-expandable-node4"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="borderless-table-expandable-checkrow4"
+              aria-labelledby="borderless-table-expandable-node4"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -19828,10 +20188,10 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
 ### Borderless usage
 
-| Class                  | Applied to                 | Outcome                                                                                        |
-| ---------------------- | -------------------------- | ---------------------------------------------------------------------------------------------- |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
 | `.pf-m-no-border-rows` | `.pf-c-table.pf-m-compact` | Modifies to remove borders between rows. **Note: Does not affect `.pf-c-table__control-row`.** |
-| `.pf-m-expandable`     | `.pf-c-table.pf-m-compact` | Indicates that the table has expandable rows.                                                  |
+| `.pf-m-expandable` | `.pf-c-table.pf-m-compact` | Indicates that the table has expandable rows. |
 
 ## Width modifiers
 
@@ -19848,11 +20208,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-width-modifiers-checkrowthead"
-            aria-label="Select all rows"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-width-modifiers-checkrowthead"
+              aria-label="Select all rows"
+            />
+          </div>
         </label>
       </td>
       <th
@@ -19909,11 +20272,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-width-modifiers-checkrow1"
-            aria-labelledby="table-width-modifiers-node1"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-width-modifiers-checkrow1"
+              aria-labelledby="table-width-modifiers-node1"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -19928,11 +20294,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-width-modifiers-checkrow2"
-            aria-labelledby="table-width-modifiers-node2"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-width-modifiers-checkrow2"
+              aria-labelledby="table-width-modifiers-node2"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -19948,11 +20317,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-width-modifiers-checkrow3"
-            aria-labelledby="table-width-modifiers-node3"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-width-modifiers-checkrow3"
+              aria-labelledby="table-width-modifiers-node3"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -19968,11 +20340,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-width-modifiers-checkrow4"
-            aria-labelledby="table-width-modifiers-node4"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-width-modifiers-checkrow4"
+              aria-labelledby="table-width-modifiers-node4"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -19993,11 +20368,11 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
 Width modifiers control the width of the columns. To control the responsive behavior of the table at different screen widths, see [responsive table behavior](#responsive-table-behavior).
 
-| Class                                                                 | Applied to     | Outcome                                                                                     |
-| --------------------------------------------------------------------- | -------------- | ------------------------------------------------------------------------------------------- |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
 | `.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.            |
+| `.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. |
 
 ## Hidden/visible breakpoint modifiers
 
@@ -20119,14 +20494,14 @@ Width modifiers control the width of the columns. To control the responsive beha
 
 ### Hidden/visible breakpoint modifiers usage
 
-| Class                             | Applied to           | Outcome                                                                                                                                                                                                                                                   |
-| --------------------------------- | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `.pf-m-hidden{-on-[breakpoint]}`  | `.pf-c-table tr > *` | Hides a table cell at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes), 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 optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                                                                                                           |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-c-table tr > *` | Hides a table cell at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes), 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 optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
 
 ## Text control modifiers
 
-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`].
+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`].
 
 ### Text control example
 
@@ -20517,14 +20892,14 @@ Add a [width modifier](#width-modifiers) to `thead th` to limit string length or
 
 ### Text control modifiers usage
 
-| Class               | Applied to                                              | Outcome                                                                                                                                                                                                                                                                                                                                                                                                  |
-| ------------------- | ------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `.pf-c-table__text` | `th > *`, `td > *`                                      | Initiates a table text element.                                                                                                                                                                                                                                                                                                                                                                          |
-| `.pf-m-wrap`        | `thead`, `tbody`, `tr`, `th`, `td`, `.pf-c-table__text` | Sets 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 <code>tbody</code> cells.                                                                                                                                                                                                                               |
-| `.pf-m-truncate`    | `thead`, `tbody`, `tr`, `th`, `td`, `.pf-c-table__text` | Sets 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 <code>thead</code> cells.                                                                                                                                                                      |
-| `.pf-m-nowrap`      | `thead`, `tbody`, `tr`, `th`, `td`, `.pf-c-table__text` | Unsets 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 <code>thead th</code> 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-content` | `thead`, `tbody`, `tr`, `th`, `td`, `.pf-c-table__text` | Fit column width to cell content.  If applied to `thead`, `tbody` or `tr`, then all child cells will be affected.                                                                                                                                                                                                                                                                                        |
-| `.pf-m-break-word`  | `thead`, `tbody`, `tr`, `th`, `td`, `.pf-c-table__text` | Breaks long strings to break wherever necessary as defined by the table layout. If applied to `thead`, `tbody` or `tr`, then all child cells will be affected.                                                                                                                                                                                                                                           |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-table__text` | `th > *`, `td > *` | Initiates a table text element. |
+| `.pf-m-wrap` | `thead`, `tbody`, `tr`, `th`, `td`, `.pf-c-table__text` | Sets 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 <code>tbody</code> cells. |
+| `.pf-m-truncate` | `thead`, `tbody`, `tr`, `th`, `td`, `.pf-c-table__text` | Sets 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 <code>thead</code> cells. |
+| `.pf-m-nowrap` | `thead`, `tbody`, `tr`, `th`, `td`, `.pf-c-table__text` | Unsets 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 <code>thead th</code> 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-content` | `thead`, `tbody`, `tr`, `th`, `td`, `.pf-c-table__text` | Fit column width to cell content.  If applied to `thead`, `tbody` or `tr`, then all child cells will be affected. |
+| `.pf-m-break-word` | `thead`, `tbody`, `tr`, `th`, `td`, `.pf-c-table__text` | Breaks long strings to break wherever necessary as defined by the table layout. If applied to `thead`, `tbody` or `tr`, then all child cells will be affected. |
 
 ## Sticky table modifiers
 
@@ -20532,9 +20907,9 @@ Add a [width modifier](#width-modifiers) to `thead th` to limit string length or
 
 There are a few ways this can be handled:
 
--   Manipulate the `z-index` of the menu and/or table headers/columns manually.
--   Use the `menuAppendTo` prop in non-composable react components with menus to append the menu to an element outside of the table (e.g., the `<body>` element) so that the menu has a higher stacking context than - and can appear on top of - sticky headers/columns as well as appear outside of any scrollable content in the table.
--   In the case where the menu is outside of the table (e.g., above the table in a toolbar, or below the table and the menu expands up), assign the entire table a lower `z-index`  than the `z-index` of the menu. This creates a lower stacking context for the entire table compared to the menu, while preserving the stacking context of the elements inside of the table.
+*   Manipulate the `z-index` of the menu and/or table headers/columns manually.
+*   Use the `menuAppendTo` prop in non-composable react components with menus to append the menu to an element outside of the table (e.g., the `<body>` element) so that the menu has a higher stacking context than - and can appear on top of - sticky headers/columns as well as appear outside of any scrollable content in the table.
+*   In the case where the menu is outside of the table (e.g., above the table in a toolbar, or below the table and the menu expands up), assign the entire table a lower `z-index`  than the `z-index` of the menu. This creates a lower stacking context for the entire table compared to the menu, while preserving the stacking context of the elements inside of the table.
 
 ### Sticky header
 
@@ -22214,12 +22589,12 @@ There are a few ways this can be handled:
 
 For sticky columns to function correctly, the parent table's width must be controlled with `.pf-c-scroll-inner-wrapper`. For sticky columns and sticky headers to function correctly, the parent table needs an inner and outer wrapper (`.pf-c-scroll-outer-wrapper` and `.pf-c-scroll-inner-wrapper`)
 
-| Class                        | Applied to     | Outcome                                                                      |
-| ---------------------------- | -------------- | ---------------------------------------------------------------------------- |
-| `.pf-m-sticky-header`        | `.pf-c-table`  | Makes the table cells in `<thead>` sticky to the top of the table on scroll. |
-| `.pf-c-scroll-outer-wrapper` | `<div>`        | Initiates a table container sticky columns outer wrapper.                    |
-| `.pf-c-scroll-inner-wrapper` | `<div>`        | Initiates a table container sticky columns inner wrapper.                    |
-| `.pf-c-table__sticky-column` | `<th>`, `<td>` | Initiates a sticky table cell.                                               |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-m-sticky-header` | `.pf-c-table` | Makes the table cells in `<thead>` sticky to the top of the table on scroll. |
+| `.pf-c-scroll-outer-wrapper` | `<div>` | Initiates a table container sticky columns outer wrapper. |
+| `.pf-c-scroll-inner-wrapper` | `<div>` | Initiates a table container sticky columns inner wrapper. |
+| `.pf-c-table__sticky-column` | `<th>`, `<td>` | Initiates a sticky table cell. |
 
 ## Nested column headers
 
@@ -22238,11 +22613,14 @@ For sticky columns to function correctly, the parent table's width must be contr
         <td rowspan="2"></td>
         <td class="pf-c-table__check" role="cell" rowspan="2">
           <label>
-            <input
-              type="checkbox"
-              name="nested-columns-expandable-example-checkrow"
-              aria-label="Select all rows"
-            />
+            <div class="pf-c-check pf-m-standalone">
+              <input
+                class="pf-c-check__input"
+                type="checkbox"
+                name="nested-columns-expandable-example-checkrow"
+                aria-label="Select all rows"
+              />
+            </div>
           </label>
         </td>
         <th
@@ -22312,11 +22690,14 @@ For sticky columns to function correctly, the parent table's width must be contr
 
         <td class="pf-c-table__check" role="cell">
           <label>
-            <input
-              type="checkbox"
-              name="nested-columns-expandable-example-checkrow1"
-              aria-labelledby="nested-columns-expandable-example-node1"
-            />
+            <div class="pf-c-check pf-m-standalone">
+              <input
+                class="pf-c-check__input"
+                type="checkbox"
+                name="nested-columns-expandable-example-checkrow1"
+                aria-labelledby="nested-columns-expandable-example-node1"
+              />
+            </div>
           </label>
         </td>
         <th
@@ -22414,11 +22795,14 @@ For sticky columns to function correctly, the parent table's width must be contr
 
         <td class="pf-c-table__check" role="cell">
           <label>
-            <input
-              type="checkbox"
-              name="nested-columns-expandable-example-checkrow2"
-              aria-labelledby="nested-columns-expandable-example-node2"
-            />
+            <div class="pf-c-check pf-m-standalone">
+              <input
+                class="pf-c-check__input"
+                type="checkbox"
+                name="nested-columns-expandable-example-checkrow2"
+                aria-labelledby="nested-columns-expandable-example-node2"
+              />
+            </div>
           </label>
         </td>
         <th
@@ -22516,11 +22900,14 @@ For sticky columns to function correctly, the parent table's width must be contr
 
         <td class="pf-c-table__check" role="cell">
           <label>
-            <input
-              type="checkbox"
-              name="nested-columns-expandable-example-checkrow3"
-              aria-labelledby="nested-columns-expandable-example-node3"
-            />
+            <div class="pf-c-check pf-m-standalone">
+              <input
+                class="pf-c-check__input"
+                type="checkbox"
+                name="nested-columns-expandable-example-checkrow3"
+                aria-labelledby="nested-columns-expandable-example-node3"
+              />
+            </div>
           </label>
         </td>
         <th
@@ -24001,18 +24388,18 @@ For sticky columns to function correctly, the parent table's width must be contr
 
 ### Accessibility
 
-| Attribute            | Applied to         | Outcome                                                   |
-| -------------------- | ------------------ | --------------------------------------------------------- |
-| `aria-hidden="true"` | `.pf-m-border-row` | Hides table row from assistive technologies. **Required** |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `aria-hidden="true"` | `.pf-m-border-row` |  Hides table row from assistive technologies. **Required** |
 
 ### Nested column header modifier usage
 
-| Class                        | Applied to                                              | Outcome                                                                                     |
-| ---------------------------- | ------------------------------------------------------- | ------------------------------------------------------------------------------------------- |
-| `.pf-m-nested-column-header` | `<thead>`                                               | Modifies a table header to handle nested header cells.                                      |
-| `.pf-m-border-row`           | `.pf-m-sticky-header > .pf-m-nested-column-header > tr` | Modifies the last row in a sticky header with nested column headers to display as a border. |
-| `.pf-m-border-right`         | `<th>`, `<td>`                                          | Modifies a table cell to show a right border.                                               |
-| `.pf-m-border-left`          | `<th>`, `<td>`                                          | Modifies a table cell to show a left border.                                                |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-m-nested-column-header` | `<thead>` | Modifies a table header to handle nested header cells. |
+| `.pf-m-border-row` | `.pf-m-sticky-header > .pf-m-nested-column-header > tr` | Modifies the last row in a sticky header with nested column headers to display as a border. |
+| `.pf-m-border-right` | `<th>`, `<td>` | Modifies a table cell to show a right border. |
+| `.pf-m-border-left` | `<th>`, `<td>` | Modifies a table cell to show a left border. |
 
 ## Favorites
 
@@ -24029,11 +24416,14 @@ For sticky columns to function correctly, the parent table's width must be contr
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-favorites-checkrowthead"
-            aria-label="Select all rows"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-favorites-checkrowthead"
+              aria-label="Select all rows"
+            />
+          </div>
         </label>
       </td>
       <td></td>
@@ -24050,11 +24440,14 @@ For sticky columns to function correctly, the parent table's width must be contr
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-favorites-checkrow1"
-            aria-labelledby="table-favorites-node1"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-favorites-checkrow1"
+              aria-labelledby="table-favorites-node1"
+            />
+          </div>
         </label>
       </td>
       <td class="pf-c-table__favorite pf-m-favorited" role="cell">
@@ -24126,11 +24519,14 @@ For sticky columns to function correctly, the parent table's width must be contr
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-favorites-checkrow2"
-            aria-labelledby="table-favorites-node2"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-favorites-checkrow2"
+              aria-labelledby="table-favorites-node2"
+            />
+          </div>
         </label>
       </td>
       <td class="pf-c-table__favorite" role="cell">
@@ -24200,11 +24596,14 @@ For sticky columns to function correctly, the parent table's width must be contr
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-favorites-checkrow3"
-            aria-labelledby="table-favorites-node3"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-favorites-checkrow3"
+              aria-labelledby="table-favorites-node3"
+            />
+          </div>
         </label>
       </td>
       <td class="pf-c-table__favorite pf-m-favorited" role="cell">
@@ -24274,11 +24673,14 @@ For sticky columns to function correctly, the parent table's width must be contr
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-favorites-checkrow4"
-            aria-labelledby="table-favorites-node4"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-favorites-checkrow4"
+              aria-labelledby="table-favorites-node4"
+            />
+          </div>
         </label>
       </td>
       <td class="pf-c-table__favorite" role="cell">
@@ -24499,19 +24901,19 @@ For sticky columns to function correctly, the parent table's width must be contr
 
 ### Favorites accessibility
 
-| Attribute                       | Applied to    | Outcome                                                                                                                                                   |
-| ------------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `role="grid"`                   | `.pf-c-table` | Identifies the element that serves as the grid widget container. **Required**                                                                             |
-| `aria-label`                    | `.pf-c-table` | Provides 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.                                                     |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `role="grid"` | `.pf-c-table` | Identifies the element that serves as the grid widget container. **Required** |
+| `aria-label` | `.pf-c-table` | Provides 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. |
 
 ### Favorites usage
 
-| Class                   | Applied to              | Outcome                                                                |
-| ----------------------- | ----------------------- | ---------------------------------------------------------------------- |
-| `.pf-c-table__favorite` | `td`                    | Initiates a favorite table body cell.                                  |
-| `.pf-m-favorited`       | `.pf-c-table__favorite` | Modifies a favorite cell for the favorited state.                      |
-| `.pf-m-favorite`        | `.pf-c-table__sort`     | Modifies a sortable table header cell for use with a favorites column. |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-table__favorite` | `td` | Initiates a favorite table body cell. |
+| `.pf-m-favorited` | `.pf-c-table__favorite` | Modifies a favorite cell for the favorited state. |
+| `.pf-m-favorite` | `.pf-c-table__sort` | Modifies a sortable table header cell for use with a favorites column. |
 
 ## Draggable rows
 
@@ -24644,20 +25046,20 @@ For sticky columns to function correctly, the parent table's width must be contr
 
 ### Draggable rows accessibility
 
-| Attribute                                                                              | Applied to                                                             | Outcome                                                                                                                                                                                                                                      |
-| -------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `aria-pressed="true or false"`                                                         | `.pf-c-table__draggable .pf-c-button`                                  | Indicates whether the button is currently pressed or not.                                                                                                                                                                                    |
-| `aria-live`                                                                            | `[element with live text]`                                             | To give screen reader users live feedback about what's happening during interaction with the table, both during drag and drop interactions and keyboard interactions. **Highly Recommended**                                                 |
-| `aria-describedby="[id value of applicable content]"`                                  | `.pf-c-table__draggable .pf-c-button`                                  | Gives the draggable button an accessible description by referring to the textual content that describes how to use the button to drag elements. The example here uses a `<div id="table-draggable-rows-help"></div>`. **Highly recommended** |
-| `aria-labelledby="[id of .pf-c-table__draggable .pf-c-button] [id of row title text]"` | `.pf-c-table__draggable .pf-c-button`                                  | Provides an accessible name for the draggable button.                                                                                                                                                                                        |
-| `id="[]"`                                                                              | `.pf-c-table__draggable .pf-c-button`, `[element with row title text]` | Gives the button and the text element accessible IDs.                                                                                                                                                                                        |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `aria-pressed="true or false"` | `.pf-c-table__draggable .pf-c-button` | Indicates whether the button is currently pressed or not.  |
+| `aria-live` | `[element with live text]` | To give screen reader users live feedback about what's happening during interaction with the table, both during drag and drop interactions and keyboard interactions. **Highly Recommended** |
+| `aria-describedby="[id value of applicable content]"` | `.pf-c-table__draggable .pf-c-button` | Gives the draggable button an accessible description by referring to the textual content that describes how to use the button to drag elements. The example here uses a `<div id="table-draggable-rows-help"></div>`. **Highly recommended** |
+| `aria-labelledby="[id of .pf-c-table__draggable .pf-c-button] [id of row title text]"` | `.pf-c-table__draggable .pf-c-button` | Provides an accessible name for the draggable button. |
+| `id="[]"` | `.pf-c-table__draggable .pf-c-button`, `[element with row title text]` | Gives the button and the text element accessible IDs. |
 
 ### Draggable rows usage
 
-| Class                    | Applied to    | Outcome                                                                               |
-| ------------------------ | ------------- | ------------------------------------------------------------------------------------- |
-| `.pf-c-table__draggable` | `<td>`        | Initiates a draggable table cell.                                                     |
-| `.pf-m-drag-over`        | `.pf-c-table` | Modifies the table to indicate that a draggable item is being dragged over the table. |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-table__draggable` | `<td>` | Initiates a draggable table cell. |
+| `.pf-m-drag-over` | `.pf-c-table` | Modifies the table to indicate that a draggable item is being dragged over the table. |
 
 ## Striped
 
@@ -24734,11 +25136,14 @@ Basic striped table rows are supported on tables with a single `<tbody>` element
       <td></td>
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-striped-expandable-checkrowthead"
-            aria-label="Select all rows"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-striped-expandable-checkrowthead"
+              aria-label="Select all rows"
+            />
+          </div>
         </label>
       </td>
       <th
@@ -24810,11 +25215,14 @@ Basic striped table rows are supported on tables with a single `<tbody>` element
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-striped-expandable-checkrow1"
-            aria-labelledby="table-striped-expandable-node1"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-striped-expandable-checkrow1"
+              aria-labelledby="table-striped-expandable-node1"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -24902,11 +25310,14 @@ Basic striped table rows are supported on tables with a single `<tbody>` element
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-striped-expandable-checkrow2"
-            aria-labelledby="table-striped-expandable-node2"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-striped-expandable-checkrow2"
+              aria-labelledby="table-striped-expandable-node2"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -24992,11 +25403,14 @@ Basic striped table rows are supported on tables with a single `<tbody>` element
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-striped-expandable-checkrow3"
-            aria-labelledby="table-striped-expandable-node3"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-striped-expandable-checkrow3"
+              aria-labelledby="table-striped-expandable-node3"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -25082,11 +25496,14 @@ Basic striped table rows are supported on tables with a single `<tbody>` element
 
       <td class="pf-c-table__check" role="cell">
         <label>
-          <input
-            type="checkbox"
-            name="table-striped-expandable-checkrow4"
-            aria-labelledby="table-striped-expandable-node4"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="table-striped-expandable-checkrow4"
+              aria-labelledby="table-striped-expandable-node4"
+            />
+          </div>
         </label>
       </td>
       <th role="columnheader" data-label="Data label name">
@@ -25319,10 +25736,10 @@ Basic striped table rows are supported on tables with a single `<tbody>` element
 
 ### Striped table usage
 
-| Class                | Applied to                   | Outcome                                                                                                                                                                         |
-| -------------------- | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `.pf-m-striped`      | `.pf-c-table`, `tbody`, `tr` | Modifies odd table rows to be striped.                                                                                                                                          |
-| `.pf-m-striped-even` | `tbody`                      | Modifies even table rows to be striped. For use in tables with multiple `tbody` elements where adjacent `tbody` elements need even row striping to maintain visual consistency. |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-m-striped` | `.pf-c-table`, `tbody`, `tr` | Modifies odd table rows to be striped. |
+| `.pf-m-striped-even` | `tbody` | Modifies even table rows to be striped. For use in tables with multiple `tbody` elements where adjacent `tbody` elements need even row striping to maintain visual consistency. |
 
 ## Documentation
 
@@ -25344,8 +25761,8 @@ By default, all table header cells are set to `white-space: nowrap`. If a `<th>`
 
 ### Implementation support
 
--   One expandable toggle button, positioned in the first cell of a non-expandable row, preceding an expandable row.
--   One checkbox or radio input, 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).
+*   One expandable toggle button, positioned in the first cell of a non-expandable row, preceding an expandable row.
+*   One checkbox or radio input, 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).