@patternfly/patternfly 4.167.0 → 4.171.0

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

@@ -6335,10 +6335,10 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
 ```html
 <table
-  class="pf-c-table pf-m-expandable pf-m-grid-lg"
+  class="pf-c-table pf-m-grid-lg"
   role="grid"
-  aria-label="Expandable table example"
-  id="table-expandable-hoverable"
+  aria-label="Hoverable and selectable table example"
+  id="table-hoverable"
 >
   <thead>
     <tr role="row">
@@ -6346,7 +6346,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <label>
           <input
             type="checkbox"
-            name="table-expandable-hoverable-checkrowthead"
+            name="table-hoverable-checkrowthead"
             aria-label="Select all rows"
           />
         </label>
@@ -6374,19 +6374,19 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <label>
         <input
           type="checkbox"
-          name="table-expandable-hoverable-checkrow1"
-          aria-labelledby="table-expandable-hoverable-node1"
+          name="table-hoverable-checkrow1"
+          aria-labelledby="table-hoverable-node1"
         />
       </label>
     </td>
     <th role="columnheader" data-label="Repository name">
-      <div id="table-expandable-hoverable-node1">Hoverable</div>
+      <div id="table-hoverable-node1">Hoverable</div>
     </th>
     <td class="pf-c-table__action" role="cell">
       <div class="pf-c-dropdown">
         <button
           class="pf-c-dropdown__toggle pf-m-plain"
-          id="table-expandable-hoverable-dropdown-kebab-selectable-1-button"
+          id="table-hoverable-dropdown-kebab-selectable-1-button"
           aria-expanded="false"
           type="button"
           aria-label="Actions"
@@ -6395,7 +6395,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         </button>
         <ul
           class="pf-c-dropdown__menu pf-m-align-right"
-          aria-labelledby="table-expandable-hoverable-dropdown-kebab-selectable-1-button"
+          aria-labelledby="table-hoverable-dropdown-kebab-selectable-1-button"
           hidden
         >
           <li>
@@ -6432,13 +6432,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <label>
         <input
           type="checkbox"
-          name="table-expandable-hoverable-checkrow2"
-          aria-labelledby="table-expandable-hoverable-node2"
+          name="table-hoverable-checkrow2"
+          aria-labelledby="table-hoverable-node2"
         />
       </label>
     </td>
     <th role="columnheader" data-label="Repository name">
-      <div id="table-expandable-hoverable-node2">
+      <div id="table-hoverable-node2">
         <b>Selected</b>
       </div>
     </th>
@@ -6446,7 +6446,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <div class="pf-c-dropdown">
         <button
           class="pf-c-dropdown__toggle pf-m-plain"
-          id="table-expandable-hoverable-dropdown-kebab-selectable-2-button"
+          id="table-hoverable-dropdown-kebab-selectable-2-button"
           aria-expanded="false"
           type="button"
           aria-label="Actions"
@@ -6455,7 +6455,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         </button>
         <ul
           class="pf-c-dropdown__menu pf-m-align-right"
-          aria-labelledby="table-expandable-hoverable-dropdown-kebab-selectable-2-button"
+          aria-labelledby="table-hoverable-dropdown-kebab-selectable-2-button"
           hidden
         >
           <li>
@@ -6492,19 +6492,19 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <label>
         <input
           type="checkbox"
-          name="table-expandable-hoverable-checkrow3"
-          aria-labelledby="table-expandable-hoverable-node3"
+          name="table-hoverable-checkrow3"
+          aria-labelledby="table-hoverable-node3"
         />
       </label>
     </td>
     <th role="columnheader" data-label="Repository name">
-      <div id="table-expandable-hoverable-node3">Hoverable</div>
+      <div id="table-hoverable-node3">Hoverable</div>
     </th>
     <td class="pf-c-table__action" role="cell">
       <div class="pf-c-dropdown">
         <button
           class="pf-c-dropdown__toggle pf-m-plain"
-          id="table-expandable-hoverable-dropdown-kebab-selectable-3-button"
+          id="table-hoverable-dropdown-kebab-selectable-3-button"
           aria-expanded="false"
           type="button"
           aria-label="Actions"
@@ -6513,7 +6513,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         </button>
         <ul
           class="pf-c-dropdown__menu pf-m-align-right"
-          aria-labelledby="table-expandable-hoverable-dropdown-kebab-selectable-3-button"
+          aria-labelledby="table-hoverable-dropdown-kebab-selectable-3-button"
           hidden
         >
           <li>
@@ -6550,19 +6550,19 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <label>
         <input
           type="checkbox"
-          name="table-expandable-hoverable-checkrow4"
-          aria-labelledby="table-expandable-hoverable-node4"
+          name="table-hoverable-checkrow4"
+          aria-labelledby="table-hoverable-node4"
         />
       </label>
     </td>
     <th role="columnheader" data-label="Repository name">
-      <div id="table-expandable-hoverable-node4">Hoverable</div>
+      <div id="table-hoverable-node4">Hoverable</div>
     </th>
     <td class="pf-c-table__action" role="cell">
       <div class="pf-c-dropdown">
         <button
           class="pf-c-dropdown__toggle pf-m-plain"
-          id="table-expandable-hoverable-dropdown-kebab-selectable-4-button"
+          id="table-hoverable-dropdown-kebab-selectable-4-button"
           aria-expanded="false"
           type="button"
           aria-label="Actions"
@@ -6571,7 +6571,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         </button>
         <ul
           class="pf-c-dropdown__menu pf-m-align-right"
-          aria-labelledby="table-expandable-hoverable-dropdown-kebab-selectable-4-button"
+          aria-labelledby="table-hoverable-dropdown-kebab-selectable-4-button"
           hidden
         >
           <li>
@@ -6608,13 +6608,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <label>
         <input
           type="checkbox"
-          name="table-expandable-hoverable-checkrow5"
-          aria-labelledby="table-expandable-hoverable-node5"
+          name="table-hoverable-checkrow5"
+          aria-labelledby="table-hoverable-node5"
         />
       </label>
     </td>
     <th role="columnheader" data-label="Repository name">
-      <div id="table-expandable-hoverable-node5">
+      <div id="table-hoverable-node5">
         <b>Selected</b>
       </div>
     </th>
@@ -6622,7 +6622,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <div class="pf-c-dropdown">
         <button
           class="pf-c-dropdown__toggle pf-m-plain"
-          id="table-expandable-hoverable-dropdown-kebab-selectable-5-button"
+          id="table-hoverable-dropdown-kebab-selectable-5-button"
           aria-expanded="false"
           type="button"
           aria-label="Actions"
@@ -6631,7 +6631,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         </button>
         <ul
           class="pf-c-dropdown__menu pf-m-align-right"
-          aria-labelledby="table-expandable-hoverable-dropdown-kebab-selectable-5-button"
+          aria-labelledby="table-hoverable-dropdown-kebab-selectable-5-button"
           hidden
         >
           <li>
@@ -6668,13 +6668,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <label>
         <input
           type="checkbox"
-          name="table-expandable-hoverable-checkrow6"
-          aria-labelledby="table-expandable-hoverable-node6"
+          name="table-hoverable-checkrow6"
+          aria-labelledby="table-hoverable-node6"
         />
       </label>
     </td>
     <th role="columnheader" data-label="Repository name">
-      <div id="table-expandable-hoverable-node6">
+      <div id="table-hoverable-node6">
         <b>Selected</b>
       </div>
     </th>
@@ -6682,7 +6682,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <div class="pf-c-dropdown">
         <button
           class="pf-c-dropdown__toggle pf-m-plain"
-          id="table-expandable-hoverable-dropdown-kebab-selectable-6-button"
+          id="table-hoverable-dropdown-kebab-selectable-6-button"
           aria-expanded="false"
           type="button"
           aria-label="Actions"
@@ -6691,7 +6691,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         </button>
         <ul
           class="pf-c-dropdown__menu pf-m-align-right"
-          aria-labelledby="table-expandable-hoverable-dropdown-kebab-selectable-6-button"
+          aria-labelledby="table-hoverable-dropdown-kebab-selectable-6-button"
           hidden
         >
           <li>
@@ -6728,13 +6728,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <label>
         <input
           type="checkbox"
-          name="table-expandable-hoverable-checkrow7"
-          aria-labelledby="table-expandable-hoverable-node7"
+          name="table-hoverable-checkrow7"
+          aria-labelledby="table-hoverable-node7"
         />
       </label>
     </td>
     <th role="columnheader" data-label="Repository name">
-      <div id="table-expandable-hoverable-node7">
+      <div id="table-hoverable-node7">
         <b>Selected</b>
       </div>
     </th>
@@ -6742,7 +6742,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <div class="pf-c-dropdown">
         <button
           class="pf-c-dropdown__toggle pf-m-plain"
-          id="table-expandable-hoverable-dropdown-kebab-selectable-7-button"
+          id="table-hoverable-dropdown-kebab-selectable-7-button"
           aria-expanded="false"
           type="button"
           aria-label="Actions"
@@ -6751,7 +6751,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         </button>
         <ul
           class="pf-c-dropdown__menu pf-m-align-right"
-          aria-labelledby="table-expandable-hoverable-dropdown-kebab-selectable-7-button"
+          aria-labelledby="table-hoverable-dropdown-kebab-selectable-7-button"
           hidden
         >
           <li>
@@ -6788,19 +6788,19 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <label>
         <input
           type="checkbox"
-          name="table-expandable-hoverable-checkrow8"
-          aria-labelledby="table-expandable-hoverable-node8"
+          name="table-hoverable-checkrow8"
+          aria-labelledby="table-hoverable-node8"
         />
       </label>
     </td>
     <th role="columnheader" data-label="Repository name">
-      <div id="table-expandable-hoverable-node8">Hoverable</div>
+      <div id="table-hoverable-node8">Hoverable</div>
     </th>
     <td class="pf-c-table__action" role="cell">
       <div class="pf-c-dropdown">
         <button
           class="pf-c-dropdown__toggle pf-m-plain"
-          id="table-expandable-hoverable-dropdown-kebab-selectable-8-button"
+          id="table-hoverable-dropdown-kebab-selectable-8-button"
           aria-expanded="false"
           type="button"
           aria-label="Actions"
@@ -6809,7 +6809,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         </button>
         <ul
           class="pf-c-dropdown__menu pf-m-align-right"
-          aria-labelledby="table-expandable-hoverable-dropdown-kebab-selectable-8-button"
+          aria-labelledby="table-hoverable-dropdown-kebab-selectable-8-button"
           hidden
         >
           <li>
@@ -6846,19 +6846,19 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <label>
         <input
           type="checkbox"
-          name="table-expandable-hoverable-checkrow9"
-          aria-labelledby="table-expandable-hoverable-node9"
+          name="table-hoverable-checkrow9"
+          aria-labelledby="table-hoverable-node9"
         />
       </label>
     </td>
     <th role="columnheader" data-label="Repository name">
-      <div id="table-expandable-hoverable-node9">Hoverable</div>
+      <div id="table-hoverable-node9">Hoverable</div>
     </th>
     <td class="pf-c-table__action" role="cell">
       <div class="pf-c-dropdown">
         <button
           class="pf-c-dropdown__toggle pf-m-plain"
-          id="table-expandable-hoverable-dropdown-kebab-selectable-9-button"
+          id="table-hoverable-dropdown-kebab-selectable-9-button"
           aria-expanded="false"
           type="button"
           aria-label="Actions"
@@ -6867,7 +6867,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         </button>
         <ul
           class="pf-c-dropdown__menu pf-m-align-right"
-          aria-labelledby="table-expandable-hoverable-dropdown-kebab-selectable-9-button"
+          aria-labelledby="table-hoverable-dropdown-kebab-selectable-9-button"
           hidden
         >
           <li>
@@ -6904,13 +6904,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <label>
         <input
           type="checkbox"
-          name="table-expandable-hoverable-checkrow10"
-          aria-labelledby="table-expandable-hoverable-node10"
+          name="table-hoverable-checkrow10"
+          aria-labelledby="table-hoverable-node10"
         />
       </label>
     </td>
     <th role="columnheader" data-label="Repository name">
-      <div id="table-expandable-hoverable-node10">
+      <div id="table-hoverable-node10">
         <b>Selected</b>
       </div>
     </th>
@@ -6918,7 +6918,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <div class="pf-c-dropdown">
         <button
           class="pf-c-dropdown__toggle pf-m-plain"
-          id="table-expandable-hoverable-dropdown-kebab-selectable-10-button"
+          id="table-hoverable-dropdown-kebab-selectable-10-button"
           aria-expanded="false"
           type="button"
           aria-label="Actions"
@@ -6927,7 +6927,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         </button>
         <ul
           class="pf-c-dropdown__menu pf-m-align-right"
-          aria-labelledby="table-expandable-hoverable-dropdown-kebab-selectable-10-button"
+          aria-labelledby="table-hoverable-dropdown-kebab-selectable-10-button"
           hidden
         >
           <li>
@@ -6964,19 +6964,19 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <label>
         <input
           type="checkbox"
-          name="table-expandable-hoverable-checkrow11"
-          aria-labelledby="table-expandable-hoverable-node11"
+          name="table-hoverable-checkrow11"
+          aria-labelledby="table-hoverable-node11"
         />
       </label>
     </td>
     <th role="columnheader" data-label="Repository name">
-      <div id="table-expandable-hoverable-node11">Hoverable</div>
+      <div id="table-hoverable-node11">Hoverable</div>
     </th>
     <td class="pf-c-table__action" role="cell">
       <div class="pf-c-dropdown">
         <button
           class="pf-c-dropdown__toggle pf-m-plain"
-          id="table-expandable-hoverable-dropdown-kebab-selectable-11-button"
+          id="table-hoverable-dropdown-kebab-selectable-11-button"
           aria-expanded="false"
           type="button"
           aria-label="Actions"
@@ -6985,7 +6985,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         </button>
         <ul
           class="pf-c-dropdown__menu pf-m-align-right"
-          aria-labelledby="table-expandable-hoverable-dropdown-kebab-selectable-11-button"
+          aria-labelledby="table-hoverable-dropdown-kebab-selectable-11-button"
           hidden
         >
           <li>
@@ -7027,8 +7027,8 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 <table
   class="pf-c-table pf-m-expandable pf-m-grid-lg"
   role="grid"
-  aria-label="Expandable table example"
-  id="table-tbody-expandable-hoverable"
+  aria-label="Expandable and hoverable table example"
+  id="table-expandable-hoverable"
 >
   <thead>
     <tr role="row">
@@ -7037,7 +7037,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <label>
           <input
             type="checkbox"
-            name="table-tbody-expandable-hoverable-checkrowthead"
+            name="table-expandable-hoverable-checkrowthead"
             aria-label="Select all rows"
           />
         </label>
@@ -7096,10 +7096,10 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <td class="pf-c-table__toggle" role="cell">
         <button
           class="pf-c-button pf-m-plain"
-          aria-labelledby="table-tbody-expandable-hoverable-node1 table-tbody-expandable-hoverable-expandable-toggle1"
-          id="table-tbody-expandable-hoverable-expandable-toggle1"
+          aria-labelledby="table-expandable-hoverable-node1 table-expandable-hoverable-expandable-toggle1"
+          id="table-expandable-hoverable-expandable-toggle1"
           aria-label="Details"
-          aria-controls="table-tbody-expandable-hoverable-content1"
+          aria-controls="table-expandable-hoverable-content1"
         >
           <div class="pf-c-table__toggle-icon">
             <i class="fas fa-angle-down" aria-hidden="true"></i>
@@ -7111,14 +7111,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <label>
           <input
             type="checkbox"
-            name="table-tbody-expandable-hoverable-checkrow1"
-            aria-labelledby="table-tbody-expandable-hoverable-node1"
+            name="table-expandable-hoverable-checkrow1"
+            aria-labelledby="table-expandable-hoverable-node1"
           />
         </label>
       </td>
       <th role="columnheader" data-label="Repository name">
         <div>
-          <div id="table-tbody-expandable-hoverable-node1">Hoverable</div>
+          <div id="table-expandable-hoverable-node1">Hoverable</div>
         </div>
       </th>
       <td role="cell" data-label="Branches">10</td>
@@ -7130,7 +7130,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <div class="pf-c-dropdown">
           <button
             class="pf-c-dropdown__toggle pf-m-plain"
-            id="table-tbody-expandable-hoverable-dropdown-kebab-1-button"
+            id="table-expandable-hoverable-dropdown-kebab-1-button"
             aria-expanded="false"
             type="button"
             aria-label="Actions"
@@ -7139,7 +7139,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
           </button>
           <ul
             class="pf-c-dropdown__menu pf-m-align-right"
-            aria-labelledby="table-tbody-expandable-hoverable-dropdown-kebab-1-button"
+            aria-labelledby="table-expandable-hoverable-dropdown-kebab-1-button"
             hidden
           >
             <li>
@@ -7179,7 +7179,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         class
         role="cell"
         colspan="4"
-        id="table-tbody-expandable-hoverable-content1"
+        id="table-expandable-hoverable-content1"
       >
         <div class="pf-c-table__expandable-row-content">Expandable content</div>
       </td>
@@ -7191,10 +7191,10 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <td class="pf-c-table__toggle" role="cell">
         <button
           class="pf-c-button pf-m-plain"
-          aria-labelledby="table-tbody-expandable-hoverable-node2 table-tbody-expandable-hoverable-expandable-toggle2"
-          id="table-tbody-expandable-hoverable-expandable-toggle2"
+          aria-labelledby="table-expandable-hoverable-node2 table-expandable-hoverable-expandable-toggle2"
+          id="table-expandable-hoverable-expandable-toggle2"
           aria-label="Details"
-          aria-controls="table-tbody-expandable-hoverable-content2"
+          aria-controls="table-expandable-hoverable-content2"
         >
           <div class="pf-c-table__toggle-icon">
             <i class="fas fa-angle-down" aria-hidden="true"></i>
@@ -7206,14 +7206,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <label>
           <input
             type="checkbox"
-            name="table-tbody-expandable-hoverable-checkrow2"
-            aria-labelledby="table-tbody-expandable-hoverable-node2"
+            name="table-expandable-hoverable-checkrow2"
+            aria-labelledby="table-expandable-hoverable-node2"
           />
         </label>
       </td>
       <th role="columnheader" data-label="Repository name">
         <div>
-          <div id="table-tbody-expandable-hoverable-node2">
+          <div id="table-expandable-hoverable-node2">
             <i>Selected and not expanded</i>
           </div>
         </div>
@@ -7227,7 +7227,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <div class="pf-c-dropdown">
           <button
             class="pf-c-dropdown__toggle pf-m-plain"
-            id="table-tbody-expandable-hoverable-dropdown-kebab-2-button"
+            id="table-expandable-hoverable-dropdown-kebab-2-button"
             aria-expanded="false"
             type="button"
             aria-label="Actions"
@@ -7236,7 +7236,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
           </button>
           <ul
             class="pf-c-dropdown__menu pf-m-align-right"
-            aria-labelledby="table-tbody-expandable-hoverable-dropdown-kebab-2-button"
+            aria-labelledby="table-expandable-hoverable-dropdown-kebab-2-button"
             hidden
           >
             <li>
@@ -7276,7 +7276,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         class
         role="cell"
         colspan="4"
-        id="table-tbody-expandable-hoverable-content2"
+        id="table-expandable-hoverable-content2"
       >
         <div class="pf-c-table__expandable-row-content">Expandable content</div>
       </td>
@@ -7288,10 +7288,10 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <td class="pf-c-table__toggle" role="cell">
         <button
           class="pf-c-button pf-m-plain"
-          aria-labelledby="table-tbody-expandable-hoverable-node3 table-tbody-expandable-hoverable-expandable-toggle3"
-          id="table-tbody-expandable-hoverable-expandable-toggle3"
+          aria-labelledby="table-expandable-hoverable-node3 table-expandable-hoverable-expandable-toggle3"
+          id="table-expandable-hoverable-expandable-toggle3"
           aria-label="Details"
-          aria-controls="table-tbody-expandable-hoverable-content3"
+          aria-controls="table-expandable-hoverable-content3"
         >
           <div class="pf-c-table__toggle-icon">
             <i class="fas fa-angle-down" aria-hidden="true"></i>
@@ -7303,14 +7303,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <label>
           <input
             type="checkbox"
-            name="table-tbody-expandable-hoverable-checkrow3"
-            aria-labelledby="table-tbody-expandable-hoverable-node3"
+            name="table-expandable-hoverable-checkrow3"
+            aria-labelledby="table-expandable-hoverable-node3"
           />
         </label>
       </td>
       <th role="columnheader" data-label="Repository name">
         <div>
-          <div id="table-tbody-expandable-hoverable-node3">Hoverable</div>
+          <div id="table-expandable-hoverable-node3">Hoverable</div>
         </div>
       </th>
       <td role="cell" data-label="Branches">10</td>
@@ -7322,7 +7322,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <div class="pf-c-dropdown">
           <button
             class="pf-c-dropdown__toggle pf-m-plain"
-            id="table-tbody-expandable-hoverable-dropdown-kebab-3-button"
+            id="table-expandable-hoverable-dropdown-kebab-3-button"
             aria-expanded="false"
             type="button"
             aria-label="Actions"
@@ -7331,7 +7331,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
           </button>
           <ul
             class="pf-c-dropdown__menu pf-m-align-right"
-            aria-labelledby="table-tbody-expandable-hoverable-dropdown-kebab-3-button"
+            aria-labelledby="table-expandable-hoverable-dropdown-kebab-3-button"
             hidden
           >
             <li>
@@ -7371,7 +7371,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         class
         role="cell"
         colspan="4"
-        id="table-tbody-expandable-hoverable-content3"
+        id="table-expandable-hoverable-content3"
       >
         <div class="pf-c-table__expandable-row-content">Expandable content</div>
       </td>
@@ -7383,10 +7383,10 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <td class="pf-c-table__toggle" role="cell">
         <button
           class="pf-c-button pf-m-plain"
-          aria-labelledby="table-tbody-expandable-hoverable-node4 table-tbody-expandable-hoverable-expandable-toggle4"
-          id="table-tbody-expandable-hoverable-expandable-toggle4"
+          aria-labelledby="table-expandable-hoverable-node4 table-expandable-hoverable-expandable-toggle4"
+          id="table-expandable-hoverable-expandable-toggle4"
           aria-label="Details"
-          aria-controls="table-tbody-expandable-hoverable-content4"
+          aria-controls="table-expandable-hoverable-content4"
         >
           <div class="pf-c-table__toggle-icon">
             <i class="fas fa-angle-down" aria-hidden="true"></i>
@@ -7398,14 +7398,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <label>
           <input
             type="checkbox"
-            name="table-tbody-expandable-hoverable-checkrow4"
-            aria-labelledby="table-tbody-expandable-hoverable-node4"
+            name="table-expandable-hoverable-checkrow4"
+            aria-labelledby="table-expandable-hoverable-node4"
           />
         </label>
       </td>
       <th role="columnheader" data-label="Repository name">
         <div>
-          <div id="table-tbody-expandable-hoverable-node4">Hoverable</div>
+          <div id="table-expandable-hoverable-node4">Hoverable</div>
         </div>
       </th>
       <td role="cell" data-label="Branches">10</td>
@@ -7417,7 +7417,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <div class="pf-c-dropdown">
           <button
             class="pf-c-dropdown__toggle pf-m-plain"
-            id="table-tbody-expandable-hoverable-dropdown-kebab-4-button"
+            id="table-expandable-hoverable-dropdown-kebab-4-button"
             aria-expanded="false"
             type="button"
             aria-label="Actions"
@@ -7426,7 +7426,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
           </button>
           <ul
             class="pf-c-dropdown__menu pf-m-align-right"
-            aria-labelledby="table-tbody-expandable-hoverable-dropdown-kebab-4-button"
+            aria-labelledby="table-expandable-hoverable-dropdown-kebab-4-button"
             hidden
           >
             <li>
@@ -7466,7 +7466,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         class
         role="cell"
         colspan="4"
-        id="table-tbody-expandable-hoverable-content4"
+        id="table-expandable-hoverable-content4"
       >
         <div class="pf-c-table__expandable-row-content">Expandable content</div>
       </td>
@@ -7478,10 +7478,10 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <td class="pf-c-table__toggle" role="cell">
         <button
           class="pf-c-button pf-m-plain"
-          aria-labelledby="table-tbody-expandable-hoverable-node5 table-tbody-expandable-hoverable-expandable-toggle5"
-          id="table-tbody-expandable-hoverable-expandable-toggle5"
+          aria-labelledby="table-expandable-hoverable-node5 table-expandable-hoverable-expandable-toggle5"
+          id="table-expandable-hoverable-expandable-toggle5"
           aria-label="Details"
-          aria-controls="table-tbody-expandable-hoverable-content5"
+          aria-controls="table-expandable-hoverable-content5"
         >
           <div class="pf-c-table__toggle-icon">
             <i class="fas fa-angle-down" aria-hidden="true"></i>
@@ -7493,14 +7493,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <label>
           <input
             type="checkbox"
-            name="table-tbody-expandable-hoverable-checkrow5"
-            aria-labelledby="table-tbody-expandable-hoverable-node5"
+            name="table-expandable-hoverable-checkrow5"
+            aria-labelledby="table-expandable-hoverable-node5"
           />
         </label>
       </td>
       <th role="columnheader" data-label="Repository name">
         <div>
-          <div id="table-tbody-expandable-hoverable-node5">
+          <div id="table-expandable-hoverable-node5">
             <i>Selected and not expanded</i>
           </div>
         </div>
@@ -7514,7 +7514,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <div class="pf-c-dropdown">
           <button
             class="pf-c-dropdown__toggle pf-m-plain"
-            id="table-tbody-expandable-hoverable-dropdown-kebab-5-button"
+            id="table-expandable-hoverable-dropdown-kebab-5-button"
             aria-expanded="false"
             type="button"
             aria-label="Actions"
@@ -7523,7 +7523,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
           </button>
           <ul
             class="pf-c-dropdown__menu pf-m-align-right"
-            aria-labelledby="table-tbody-expandable-hoverable-dropdown-kebab-5-button"
+            aria-labelledby="table-expandable-hoverable-dropdown-kebab-5-button"
             hidden
           >
             <li>
@@ -7563,7 +7563,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         class
         role="cell"
         colspan="4"
-        id="table-tbody-expandable-hoverable-content5"
+        id="table-expandable-hoverable-content5"
       >
         <div class="pf-c-table__expandable-row-content">Expandable content</div>
       </td>
@@ -7575,10 +7575,10 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <td class="pf-c-table__toggle" role="cell">
         <button
           class="pf-c-button pf-m-plain"
-          aria-labelledby="table-tbody-expandable-hoverable-node6 table-tbody-expandable-hoverable-expandable-toggle6"
-          id="table-tbody-expandable-hoverable-expandable-toggle6"
+          aria-labelledby="table-expandable-hoverable-node6 table-expandable-hoverable-expandable-toggle6"
+          id="table-expandable-hoverable-expandable-toggle6"
           aria-label="Details"
-          aria-controls="table-tbody-expandable-hoverable-content6"
+          aria-controls="table-expandable-hoverable-content6"
         >
           <div class="pf-c-table__toggle-icon">
             <i class="fas fa-angle-down" aria-hidden="true"></i>
@@ -7590,14 +7590,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <label>
           <input
             type="checkbox"
-            name="table-tbody-expandable-hoverable-checkrow6"
-            aria-labelledby="table-tbody-expandable-hoverable-node6"
+            name="table-expandable-hoverable-checkrow6"
+            aria-labelledby="table-expandable-hoverable-node6"
           />
         </label>
       </td>
       <th role="columnheader" data-label="Repository name">
         <div>
-          <div id="table-tbody-expandable-hoverable-node6">
+          <div id="table-expandable-hoverable-node6">
             <i>Selected and not expanded</i>
           </div>
         </div>
@@ -7611,7 +7611,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <div class="pf-c-dropdown">
           <button
             class="pf-c-dropdown__toggle pf-m-plain"
-            id="table-tbody-expandable-hoverable-dropdown-kebab-6-button"
+            id="table-expandable-hoverable-dropdown-kebab-6-button"
             aria-expanded="false"
             type="button"
             aria-label="Actions"
@@ -7620,7 +7620,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
           </button>
           <ul
             class="pf-c-dropdown__menu pf-m-align-right"
-            aria-labelledby="table-tbody-expandable-hoverable-dropdown-kebab-6-button"
+            aria-labelledby="table-expandable-hoverable-dropdown-kebab-6-button"
             hidden
           >
             <li>
@@ -7660,7 +7660,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         class
         role="cell"
         colspan="4"
-        id="table-tbody-expandable-hoverable-content6"
+        id="table-expandable-hoverable-content6"
       >
         <div class="pf-c-table__expandable-row-content">Expandable content</div>
       </td>
@@ -7672,10 +7672,10 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <td class="pf-c-table__toggle" role="cell">
         <button
           class="pf-c-button pf-m-plain"
-          aria-labelledby="table-tbody-expandable-hoverable-node7 table-tbody-expandable-hoverable-expandable-toggle7"
-          id="table-tbody-expandable-hoverable-expandable-toggle7"
+          aria-labelledby="table-expandable-hoverable-node7 table-expandable-hoverable-expandable-toggle7"
+          id="table-expandable-hoverable-expandable-toggle7"
           aria-label="Details"
-          aria-controls="table-tbody-expandable-hoverable-content7"
+          aria-controls="table-expandable-hoverable-content7"
         >
           <div class="pf-c-table__toggle-icon">
             <i class="fas fa-angle-down" aria-hidden="true"></i>
@@ -7687,14 +7687,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <label>
           <input
             type="checkbox"
-            name="table-tbody-expandable-hoverable-checkrow7"
-            aria-labelledby="table-tbody-expandable-hoverable-node7"
+            name="table-expandable-hoverable-checkrow7"
+            aria-labelledby="table-expandable-hoverable-node7"
           />
         </label>
       </td>
       <th role="columnheader" data-label="Repository name">
         <div>
-          <div id="table-tbody-expandable-hoverable-node7">
+          <div id="table-expandable-hoverable-node7">
             <i>Selected and not expanded</i>
           </div>
         </div>
@@ -7708,7 +7708,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <div class="pf-c-dropdown">
           <button
             class="pf-c-dropdown__toggle pf-m-plain"
-            id="table-tbody-expandable-hoverable-dropdown-kebab-7-button"
+            id="table-expandable-hoverable-dropdown-kebab-7-button"
             aria-expanded="false"
             type="button"
             aria-label="Actions"
@@ -7717,7 +7717,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
           </button>
           <ul
             class="pf-c-dropdown__menu pf-m-align-right"
-            aria-labelledby="table-tbody-expandable-hoverable-dropdown-kebab-7-button"
+            aria-labelledby="table-expandable-hoverable-dropdown-kebab-7-button"
             hidden
           >
             <li>
@@ -7757,7 +7757,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         class
         role="cell"
         colspan="4"
-        id="table-tbody-expandable-hoverable-content7"
+        id="table-expandable-hoverable-content7"
       >
         <div class="pf-c-table__expandable-row-content">Expandable content</div>
       </td>
@@ -7769,10 +7769,10 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <td class="pf-c-table__toggle" role="cell">
         <button
           class="pf-c-button pf-m-plain"
-          aria-labelledby="table-tbody-expandable-hoverable-node8 table-tbody-expandable-hoverable-expandable-toggle8"
-          id="table-tbody-expandable-hoverable-expandable-toggle8"
+          aria-labelledby="table-expandable-hoverable-node8 table-expandable-hoverable-expandable-toggle8"
+          id="table-expandable-hoverable-expandable-toggle8"
           aria-label="Details"
-          aria-controls="table-tbody-expandable-hoverable-content8"
+          aria-controls="table-expandable-hoverable-content8"
         >
           <div class="pf-c-table__toggle-icon">
             <i class="fas fa-angle-down" aria-hidden="true"></i>
@@ -7784,14 +7784,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <label>
           <input
             type="checkbox"
-            name="table-tbody-expandable-hoverable-checkrow8"
-            aria-labelledby="table-tbody-expandable-hoverable-node8"
+            name="table-expandable-hoverable-checkrow8"
+            aria-labelledby="table-expandable-hoverable-node8"
           />
         </label>
       </td>
       <th role="columnheader" data-label="Repository name">
         <div>
-          <div id="table-tbody-expandable-hoverable-node8">Hoverable</div>
+          <div id="table-expandable-hoverable-node8">Hoverable</div>
         </div>
       </th>
       <td role="cell" data-label="Branches">10</td>
@@ -7803,7 +7803,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <div class="pf-c-dropdown">
           <button
             class="pf-c-dropdown__toggle pf-m-plain"
-            id="table-tbody-expandable-hoverable-dropdown-kebab-8-button"
+            id="table-expandable-hoverable-dropdown-kebab-8-button"
             aria-expanded="false"
             type="button"
             aria-label="Actions"
@@ -7812,7 +7812,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
           </button>
           <ul
             class="pf-c-dropdown__menu pf-m-align-right"
-            aria-labelledby="table-tbody-expandable-hoverable-dropdown-kebab-8-button"
+            aria-labelledby="table-expandable-hoverable-dropdown-kebab-8-button"
             hidden
           >
             <li>
@@ -7852,7 +7852,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         class
         role="cell"
         colspan="4"
-        id="table-tbody-expandable-hoverable-content8"
+        id="table-expandable-hoverable-content8"
       >
         <div class="pf-c-table__expandable-row-content">Expandable content</div>
       </td>
@@ -7864,10 +7864,10 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <td class="pf-c-table__toggle" role="cell">
         <button
           class="pf-c-button pf-m-plain"
-          aria-labelledby="table-tbody-expandable-hoverable-node9 table-tbody-expandable-hoverable-expandable-toggle9"
-          id="table-tbody-expandable-hoverable-expandable-toggle9"
+          aria-labelledby="table-expandable-hoverable-node9 table-expandable-hoverable-expandable-toggle9"
+          id="table-expandable-hoverable-expandable-toggle9"
           aria-label="Details"
-          aria-controls="table-tbody-expandable-hoverable-content9"
+          aria-controls="table-expandable-hoverable-content9"
         >
           <div class="pf-c-table__toggle-icon">
             <i class="fas fa-angle-down" aria-hidden="true"></i>
@@ -7879,14 +7879,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <label>
           <input
             type="checkbox"
-            name="table-tbody-expandable-hoverable-checkrow9"
-            aria-labelledby="table-tbody-expandable-hoverable-node9"
+            name="table-expandable-hoverable-checkrow9"
+            aria-labelledby="table-expandable-hoverable-node9"
           />
         </label>
       </td>
       <th role="columnheader" data-label="Repository name">
         <div>
-          <div id="table-tbody-expandable-hoverable-node9">Hoverable</div>
+          <div id="table-expandable-hoverable-node9">Hoverable</div>
         </div>
       </th>
       <td role="cell" data-label="Branches">10</td>
@@ -7898,7 +7898,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <div class="pf-c-dropdown">
           <button
             class="pf-c-dropdown__toggle pf-m-plain"
-            id="table-tbody-expandable-hoverable-dropdown-kebab-9-button"
+            id="table-expandable-hoverable-dropdown-kebab-9-button"
             aria-expanded="false"
             type="button"
             aria-label="Actions"
@@ -7907,7 +7907,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
           </button>
           <ul
             class="pf-c-dropdown__menu pf-m-align-right"
-            aria-labelledby="table-tbody-expandable-hoverable-dropdown-kebab-9-button"
+            aria-labelledby="table-expandable-hoverable-dropdown-kebab-9-button"
             hidden
           >
             <li>
@@ -7947,7 +7947,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         class
         role="cell"
         colspan="4"
-        id="table-tbody-expandable-hoverable-content9"
+        id="table-expandable-hoverable-content9"
       >
         <div class="pf-c-table__expandable-row-content">Expandable content</div>
       </td>
@@ -7959,10 +7959,10 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <td class="pf-c-table__toggle" role="cell">
         <button
           class="pf-c-button pf-m-plain"
-          aria-labelledby="table-tbody-expandable-hoverable-node10 table-tbody-expandable-hoverable-expandable-toggle10"
-          id="table-tbody-expandable-hoverable-expandable-toggle10"
+          aria-labelledby="table-expandable-hoverable-node10 table-expandable-hoverable-expandable-toggle10"
+          id="table-expandable-hoverable-expandable-toggle10"
           aria-label="Details"
-          aria-controls="table-tbody-expandable-hoverable-content10"
+          aria-controls="table-expandable-hoverable-content10"
         >
           <div class="pf-c-table__toggle-icon">
             <i class="fas fa-angle-down" aria-hidden="true"></i>
@@ -7974,14 +7974,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <label>
           <input
             type="checkbox"
-            name="table-tbody-expandable-hoverable-checkrow10"
-            aria-labelledby="table-tbody-expandable-hoverable-node10"
+            name="table-expandable-hoverable-checkrow10"
+            aria-labelledby="table-expandable-hoverable-node10"
           />
         </label>
       </td>
       <th role="columnheader" data-label="Repository name">
         <div>
-          <div id="table-tbody-expandable-hoverable-node10">Hoverable</div>
+          <div id="table-expandable-hoverable-node10">Hoverable</div>
         </div>
       </th>
       <td role="cell" data-label="Branches">10</td>
@@ -7993,7 +7993,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <div class="pf-c-dropdown">
           <button
             class="pf-c-dropdown__toggle pf-m-plain"
-            id="table-tbody-expandable-hoverable-dropdown-kebab-10-button"
+            id="table-expandable-hoverable-dropdown-kebab-10-button"
             aria-expanded="false"
             type="button"
             aria-label="Actions"
@@ -8002,7 +8002,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
           </button>
           <ul
             class="pf-c-dropdown__menu pf-m-align-right"
-            aria-labelledby="table-tbody-expandable-hoverable-dropdown-kebab-10-button"
+            aria-labelledby="table-expandable-hoverable-dropdown-kebab-10-button"
             hidden
           >
             <li>
@@ -8042,7 +8042,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         class
         role="cell"
         colspan="4"
-        id="table-tbody-expandable-hoverable-content10"
+        id="table-expandable-hoverable-content10"
       >
         <div class="pf-c-table__expandable-row-content">Expandable content</div>
       </td>
@@ -8058,10 +8058,10 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <td class="pf-c-table__toggle" role="cell">
         <button
           class="pf-c-button pf-m-plain pf-m-expanded"
-          aria-labelledby="table-tbody-expandable-hoverable-node11 table-tbody-expandable-hoverable-expandable-toggle11"
-          id="table-tbody-expandable-hoverable-expandable-toggle11"
+          aria-labelledby="table-expandable-hoverable-node11 table-expandable-hoverable-expandable-toggle11"
+          id="table-expandable-hoverable-expandable-toggle11"
           aria-label="Details"
-          aria-controls="table-tbody-expandable-hoverable-content11"
+          aria-controls="table-expandable-hoverable-content11"
           aria-expanded="true"
         >
           <div class="pf-c-table__toggle-icon">
@@ -8074,14 +8074,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <label>
           <input
             type="checkbox"
-            name="table-tbody-expandable-hoverable-checkrow11"
-            aria-labelledby="table-tbody-expandable-hoverable-node11"
+            name="table-expandable-hoverable-checkrow11"
+            aria-labelledby="table-expandable-hoverable-node11"
           />
         </label>
       </td>
       <th role="columnheader" data-label="Repository name">
         <div>
-          <div id="table-tbody-expandable-hoverable-node11">
+          <div id="table-expandable-hoverable-node11">
             <b>Expanded and selected</b>
           </div>
         </div>
@@ -8095,7 +8095,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <div class="pf-c-dropdown">
           <button
             class="pf-c-dropdown__toggle pf-m-plain"
-            id="table-tbody-expandable-hoverable-dropdown-kebab-11-button"
+            id="table-expandable-hoverable-dropdown-kebab-11-button"
             aria-expanded="false"
             type="button"
             aria-label="Actions"
@@ -8104,7 +8104,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
           </button>
           <ul
             class="pf-c-dropdown__menu pf-m-align-right"
-            aria-labelledby="table-tbody-expandable-hoverable-dropdown-kebab-11-button"
+            aria-labelledby="table-expandable-hoverable-dropdown-kebab-11-button"
             hidden
           >
             <li>
@@ -8144,7 +8144,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         class
         role="cell"
         colspan="4"
-        id="table-tbody-expandable-hoverable-content11"
+        id="table-expandable-hoverable-content11"
       >
         <div class="pf-c-table__expandable-row-content">Expandable content</div>
       </td>
@@ -8156,10 +8156,10 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <td class="pf-c-table__toggle" role="cell">
         <button
           class="pf-c-button pf-m-plain"
-          aria-labelledby="table-tbody-expandable-hoverable-node12 table-tbody-expandable-hoverable-expandable-toggle12"
-          id="table-tbody-expandable-hoverable-expandable-toggle12"
+          aria-labelledby="table-expandable-hoverable-node12 table-expandable-hoverable-expandable-toggle12"
+          id="table-expandable-hoverable-expandable-toggle12"
           aria-label="Details"
-          aria-controls="table-tbody-expandable-hoverable-content12"
+          aria-controls="table-expandable-hoverable-content12"
         >
           <div class="pf-c-table__toggle-icon">
             <i class="fas fa-angle-down" aria-hidden="true"></i>
@@ -8171,14 +8171,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <label>
           <input
             type="checkbox"
-            name="table-tbody-expandable-hoverable-checkrow12"
-            aria-labelledby="table-tbody-expandable-hoverable-node12"
+            name="table-expandable-hoverable-checkrow12"
+            aria-labelledby="table-expandable-hoverable-node12"
           />
         </label>
       </td>
       <th role="columnheader" data-label="Repository name">
         <div>
-          <div id="table-tbody-expandable-hoverable-node12">Hoverable</div>
+          <div id="table-expandable-hoverable-node12">Hoverable</div>
         </div>
       </th>
       <td role="cell" data-label="Branches">10</td>
@@ -8190,7 +8190,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <div class="pf-c-dropdown">
           <button
             class="pf-c-dropdown__toggle pf-m-plain"
-            id="table-tbody-expandable-hoverable-dropdown-kebab-12-button"
+            id="table-expandable-hoverable-dropdown-kebab-12-button"
             aria-expanded="false"
             type="button"
             aria-label="Actions"
@@ -8199,7 +8199,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
           </button>
           <ul
             class="pf-c-dropdown__menu pf-m-align-right"
-            aria-labelledby="table-tbody-expandable-hoverable-dropdown-kebab-12-button"
+            aria-labelledby="table-expandable-hoverable-dropdown-kebab-12-button"
             hidden
           >
             <li>
@@ -8239,7 +8239,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         class
         role="cell"
         colspan="4"
-        id="table-tbody-expandable-hoverable-content12"
+        id="table-expandable-hoverable-content12"
       >
         <div class="pf-c-table__expandable-row-content">Expandable content</div>
       </td>
@@ -8255,10 +8255,10 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <td class="pf-c-table__toggle" role="cell">
         <button
           class="pf-c-button pf-m-plain pf-m-expanded"
-          aria-labelledby="table-tbody-expandable-hoverable-node13 table-tbody-expandable-hoverable-expandable-toggle13"
-          id="table-tbody-expandable-hoverable-expandable-toggle13"
+          aria-labelledby="table-expandable-hoverable-node13 table-expandable-hoverable-expandable-toggle13"
+          id="table-expandable-hoverable-expandable-toggle13"
           aria-label="Details"
-          aria-controls="table-tbody-expandable-hoverable-content13"
+          aria-controls="table-expandable-hoverable-content13"
           aria-expanded="true"
         >
           <div class="pf-c-table__toggle-icon">
@@ -8271,14 +8271,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <label>
           <input
             type="checkbox"
-            name="table-tbody-expandable-hoverable-checkrow13"
-            aria-labelledby="table-tbody-expandable-hoverable-node13"
+            name="table-expandable-hoverable-checkrow13"
+            aria-labelledby="table-expandable-hoverable-node13"
           />
         </label>
       </td>
       <th role="columnheader" data-label="Repository name">
         <div>
-          <div id="table-tbody-expandable-hoverable-node13">
+          <div id="table-expandable-hoverable-node13">
             <b>Expanded and selected</b>
           </div>
         </div>
@@ -8292,7 +8292,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <div class="pf-c-dropdown">
           <button
             class="pf-c-dropdown__toggle pf-m-plain"
-            id="table-tbody-expandable-hoverable-dropdown-kebab-13-button"
+            id="table-expandable-hoverable-dropdown-kebab-13-button"
             aria-expanded="false"
             type="button"
             aria-label="Actions"
@@ -8301,7 +8301,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
           </button>
           <ul
             class="pf-c-dropdown__menu pf-m-align-right"
-            aria-labelledby="table-tbody-expandable-hoverable-dropdown-kebab-13-button"
+            aria-labelledby="table-expandable-hoverable-dropdown-kebab-13-button"
             hidden
           >
             <li>
@@ -8341,7 +8341,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         class
         role="cell"
         colspan="4"
-        id="table-tbody-expandable-hoverable-content13"
+        id="table-expandable-hoverable-content13"
       >
         <div class="pf-c-table__expandable-row-content">Expandable content</div>
       </td>
@@ -8357,10 +8357,10 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <td class="pf-c-table__toggle" role="cell">
         <button
           class="pf-c-button pf-m-plain pf-m-expanded"
-          aria-labelledby="table-tbody-expandable-hoverable-node15 table-tbody-expandable-hoverable-expandable-toggle15"
-          id="table-tbody-expandable-hoverable-expandable-toggle15"
+          aria-labelledby="table-expandable-hoverable-node15 table-expandable-hoverable-expandable-toggle15"
+          id="table-expandable-hoverable-expandable-toggle15"
           aria-label="Details"
-          aria-controls="table-tbody-expandable-hoverable-content15"
+          aria-controls="table-expandable-hoverable-content15"
           aria-expanded="true"
         >
           <div class="pf-c-table__toggle-icon">
@@ -8373,14 +8373,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <label>
           <input
             type="checkbox"
-            name="table-tbody-expandable-hoverable-checkrow15"
-            aria-labelledby="table-tbody-expandable-hoverable-node15"
+            name="table-expandable-hoverable-checkrow15"
+            aria-labelledby="table-expandable-hoverable-node15"
           />
         </label>
       </td>
       <th role="columnheader" data-label="Repository name">
         <div>
-          <div id="table-tbody-expandable-hoverable-node15">
+          <div id="table-expandable-hoverable-node15">
             <b>Expanded and selected</b>
           </div>
         </div>
@@ -8394,7 +8394,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <div class="pf-c-dropdown">
           <button
             class="pf-c-dropdown__toggle pf-m-plain"
-            id="table-tbody-expandable-hoverable-dropdown-kebab-15-button"
+            id="table-expandable-hoverable-dropdown-kebab-15-button"
             aria-expanded="false"
             type="button"
             aria-label="Actions"
@@ -8403,7 +8403,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
           </button>
           <ul
             class="pf-c-dropdown__menu pf-m-align-right"
-            aria-labelledby="table-tbody-expandable-hoverable-dropdown-kebab-15-button"
+            aria-labelledby="table-expandable-hoverable-dropdown-kebab-15-button"
             hidden
           >
             <li>
@@ -8443,7 +8443,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         class
         role="cell"
         colspan="4"
-        id="table-tbody-expandable-hoverable-content15"
+        id="table-expandable-hoverable-content15"
       >
         <div class="pf-c-table__expandable-row-content">Expandable content</div>
       </td>
@@ -8455,10 +8455,10 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <td class="pf-c-table__toggle" role="cell">
         <button
           class="pf-c-button pf-m-plain pf-m-expanded"
-          aria-labelledby="table-tbody-expandable-hoverable-node14 table-tbody-expandable-hoverable-expandable-toggle14"
-          id="table-tbody-expandable-hoverable-expandable-toggle14"
+          aria-labelledby="table-expandable-hoverable-node14 table-expandable-hoverable-expandable-toggle14"
+          id="table-expandable-hoverable-expandable-toggle14"
           aria-label="Details"
-          aria-controls="table-tbody-expandable-hoverable-content14"
+          aria-controls="table-expandable-hoverable-content14"
           aria-expanded="true"
         >
           <div class="pf-c-table__toggle-icon">
@@ -8471,16 +8471,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <label>
           <input
             type="checkbox"
-            name="table-tbody-expandable-hoverable-checkrow14"
-            aria-labelledby="table-tbody-expandable-hoverable-node14"
+            name="table-expandable-hoverable-checkrow14"
+            aria-labelledby="table-expandable-hoverable-node14"
           />
         </label>
       </td>
       <th role="columnheader" data-label="Repository name">
         <div>
-          <div
-            id="table-tbody-expandable-hoverable-node14"
-          >Expanded and not selected</div>
+          <div id="table-expandable-hoverable-node14">Expanded and not selected</div>
         </div>
       </th>
       <td role="cell" data-label="Branches">10</td>
@@ -8492,7 +8490,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <div class="pf-c-dropdown">
           <button
             class="pf-c-dropdown__toggle pf-m-plain"
-            id="table-tbody-expandable-hoverable-dropdown-kebab-14-button"
+            id="table-expandable-hoverable-dropdown-kebab-14-button"
             aria-expanded="false"
             type="button"
             aria-label="Actions"
@@ -8501,7 +8499,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
           </button>
           <ul
             class="pf-c-dropdown__menu pf-m-align-right"
-            aria-labelledby="table-tbody-expandable-hoverable-dropdown-kebab-14-button"
+            aria-labelledby="table-expandable-hoverable-dropdown-kebab-14-button"
             hidden
           >
             <li>
@@ -8541,7 +8539,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         class
         role="cell"
         colspan="4"
-        id="table-tbody-expandable-hoverable-content14"
+        id="table-expandable-hoverable-content14"
       >
         <div class="pf-c-table__expandable-row-content">Expandable content</div>
       </td>
@@ -8553,10 +8551,10 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <td class="pf-c-table__toggle" role="cell">
         <button
           class="pf-c-button pf-m-plain"
-          aria-labelledby="table-tbody-expandable-hoverable-node16 table-tbody-expandable-hoverable-expandable-toggle16"
-          id="table-tbody-expandable-hoverable-expandable-toggle16"
+          aria-labelledby="table-expandable-hoverable-node16 table-expandable-hoverable-expandable-toggle16"
+          id="table-expandable-hoverable-expandable-toggle16"
           aria-label="Details"
-          aria-controls="table-tbody-expandable-hoverable-content16"
+          aria-controls="table-expandable-hoverable-content16"
         >
           <div class="pf-c-table__toggle-icon">
             <i class="fas fa-angle-down" aria-hidden="true"></i>
@@ -8568,14 +8566,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <label>
           <input
             type="checkbox"
-            name="table-tbody-expandable-hoverable-checkrow16"
-            aria-labelledby="table-tbody-expandable-hoverable-node16"
+            name="table-expandable-hoverable-checkrow16"
+            aria-labelledby="table-expandable-hoverable-node16"
           />
         </label>
       </td>
       <th role="columnheader" data-label="Repository name">
         <div>
-          <div id="table-tbody-expandable-hoverable-node16">Hoverable</div>
+          <div id="table-expandable-hoverable-node16">Hoverable</div>
         </div>
       </th>
       <td role="cell" data-label="Branches">10</td>
@@ -8587,7 +8585,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <div class="pf-c-dropdown">
           <button
             class="pf-c-dropdown__toggle pf-m-plain"
-            id="table-tbody-expandable-hoverable-dropdown-kebab-16-button"
+            id="table-expandable-hoverable-dropdown-kebab-16-button"
             aria-expanded="false"
             type="button"
             aria-label="Actions"
@@ -8596,7 +8594,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
           </button>
           <ul
             class="pf-c-dropdown__menu pf-m-align-right"
-            aria-labelledby="table-tbody-expandable-hoverable-dropdown-kebab-16-button"
+            aria-labelledby="table-expandable-hoverable-dropdown-kebab-16-button"
             hidden
           >
             <li>
@@ -8636,7 +8634,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         class
         role="cell"
         colspan="4"
-        id="table-tbody-expandable-hoverable-content16"
+        id="table-expandable-hoverable-content16"
       >
         <div class="pf-c-table__expandable-row-content">Expandable content</div>
       </td>
@@ -8648,10 +8646,10 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <td class="pf-c-table__toggle" role="cell">
         <button
           class="pf-c-button pf-m-plain pf-m-expanded"
-          aria-labelledby="table-tbody-expandable-hoverable-node17 table-tbody-expandable-hoverable-expandable-toggle17"
-          id="table-tbody-expandable-hoverable-expandable-toggle17"
+          aria-labelledby="table-expandable-hoverable-node17 table-expandable-hoverable-expandable-toggle17"
+          id="table-expandable-hoverable-expandable-toggle17"
           aria-label="Details"
-          aria-controls="table-tbody-expandable-hoverable-content17"
+          aria-controls="table-expandable-hoverable-content17"
           aria-expanded="true"
         >
           <div class="pf-c-table__toggle-icon">
@@ -8664,16 +8662,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <label>
           <input
             type="checkbox"
-            name="table-tbody-expandable-hoverable-checkrow17"
-            aria-labelledby="table-tbody-expandable-hoverable-node17"
+            name="table-expandable-hoverable-checkrow17"
+            aria-labelledby="table-expandable-hoverable-node17"
           />
         </label>
       </td>
       <th role="columnheader" data-label="Repository name">
         <div>
-          <div
-            id="table-tbody-expandable-hoverable-node17"
-          >Expanded and not selected</div>
+          <div id="table-expandable-hoverable-node17">Expanded and not selected</div>
         </div>
       </th>
       <td role="cell" data-label="Branches">10</td>
@@ -8685,7 +8681,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <div class="pf-c-dropdown">
           <button
             class="pf-c-dropdown__toggle pf-m-plain"
-            id="table-tbody-expandable-hoverable-dropdown-kebab-17-button"
+            id="table-expandable-hoverable-dropdown-kebab-17-button"
             aria-expanded="false"
             type="button"
             aria-label="Actions"
@@ -8694,7 +8690,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
           </button>
           <ul
             class="pf-c-dropdown__menu pf-m-align-right"
-            aria-labelledby="table-tbody-expandable-hoverable-dropdown-kebab-17-button"
+            aria-labelledby="table-expandable-hoverable-dropdown-kebab-17-button"
             hidden
           >
             <li>
@@ -8734,7 +8730,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         class
         role="cell"
         colspan="4"
-        id="table-tbody-expandable-hoverable-content17"
+        id="table-expandable-hoverable-content17"
       >
         <div class="pf-c-table__expandable-row-content">Expandable content</div>
       </td>
@@ -8746,10 +8742,10 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <td class="pf-c-table__toggle" role="cell">
         <button
           class="pf-c-button pf-m-plain"
-          aria-labelledby="table-tbody-expandable-hoverable-node18 table-tbody-expandable-hoverable-expandable-toggle18"
-          id="table-tbody-expandable-hoverable-expandable-toggle18"
+          aria-labelledby="table-expandable-hoverable-node18 table-expandable-hoverable-expandable-toggle18"
+          id="table-expandable-hoverable-expandable-toggle18"
           aria-label="Details"
-          aria-controls="table-tbody-expandable-hoverable-content18"
+          aria-controls="table-expandable-hoverable-content18"
         >
           <div class="pf-c-table__toggle-icon">
             <i class="fas fa-angle-down" aria-hidden="true"></i>
@@ -8761,14 +8757,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <label>
           <input
             type="checkbox"
-            name="table-tbody-expandable-hoverable-checkrow18"
-            aria-labelledby="table-tbody-expandable-hoverable-node18"
+            name="table-expandable-hoverable-checkrow18"
+            aria-labelledby="table-expandable-hoverable-node18"
           />
         </label>
       </td>
       <th role="columnheader" data-label="Repository name">
         <div>
-          <div id="table-tbody-expandable-hoverable-node18">Hoverable</div>
+          <div id="table-expandable-hoverable-node18">Hoverable</div>
         </div>
       </th>
       <td role="cell" data-label="Branches">10</td>
@@ -8780,7 +8776,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <div class="pf-c-dropdown">
           <button
             class="pf-c-dropdown__toggle pf-m-plain"
-            id="table-tbody-expandable-hoverable-dropdown-kebab-18-button"
+            id="table-expandable-hoverable-dropdown-kebab-18-button"
             aria-expanded="false"
             type="button"
             aria-label="Actions"
@@ -8789,7 +8785,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
           </button>
           <ul
             class="pf-c-dropdown__menu pf-m-align-right"
-            aria-labelledby="table-tbody-expandable-hoverable-dropdown-kebab-18-button"
+            aria-labelledby="table-expandable-hoverable-dropdown-kebab-18-button"
             hidden
           >
             <li>
@@ -8829,7 +8825,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         class
         role="cell"
         colspan="4"
-        id="table-tbody-expandable-hoverable-content18"
+        id="table-expandable-hoverable-content18"
       >
         <div class="pf-c-table__expandable-row-content">Expandable content</div>
       </td>
@@ -8841,10 +8837,10 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <td class="pf-c-table__toggle" role="cell">
         <button
           class="pf-c-button pf-m-plain"
-          aria-labelledby="table-tbody-expandable-hoverable-node19 table-tbody-expandable-hoverable-expandable-toggle19"
-          id="table-tbody-expandable-hoverable-expandable-toggle19"
+          aria-labelledby="table-expandable-hoverable-node19 table-expandable-hoverable-expandable-toggle19"
+          id="table-expandable-hoverable-expandable-toggle19"
           aria-label="Details"
-          aria-controls="table-tbody-expandable-hoverable-content19"
+          aria-controls="table-expandable-hoverable-content19"
         >
           <div class="pf-c-table__toggle-icon">
             <i class="fas fa-angle-down" aria-hidden="true"></i>
@@ -8856,14 +8852,14 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <label>
           <input
             type="checkbox"
-            name="table-tbody-expandable-hoverable-checkrow19"
-            aria-labelledby="table-tbody-expandable-hoverable-node19"
+            name="table-expandable-hoverable-checkrow19"
+            aria-labelledby="table-expandable-hoverable-node19"
           />
         </label>
       </td>
       <th role="columnheader" data-label="Repository name">
         <div>
-          <div id="table-tbody-expandable-hoverable-node19">Hoverable</div>
+          <div id="table-expandable-hoverable-node19">Hoverable</div>
         </div>
       </th>
       <td role="cell" data-label="Branches">10</td>
@@ -8875,7 +8871,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <div class="pf-c-dropdown">
           <button
             class="pf-c-dropdown__toggle pf-m-plain"
-            id="table-tbody-expandable-hoverable-dropdown-kebab-19-button"
+            id="table-expandable-hoverable-dropdown-kebab-19-button"
             aria-expanded="false"
             type="button"
             aria-label="Actions"
@@ -8884,7 +8880,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
           </button>
           <ul
             class="pf-c-dropdown__menu pf-m-align-right"
-            aria-labelledby="table-tbody-expandable-hoverable-dropdown-kebab-19-button"
+            aria-labelledby="table-expandable-hoverable-dropdown-kebab-19-button"
             hidden
           >
             <li>
@@ -8924,7 +8920,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         class
         role="cell"
         colspan="4"
-        id="table-tbody-expandable-hoverable-content19"
+        id="table-expandable-hoverable-content19"
       >
         <div class="pf-c-table__expandable-row-content">Expandable content</div>
       </td>
@@ -19625,9 +19621,6 @@ Long strings in table cells will push that column wider and possible take from o
       <td role="cell" data-label="Workspaces">5</td>
       <td role="cell" data-label="Last commit">2 days ago</td>
     </tr>
-  </tbody>
-
-  <tbody>
     <tr>
       <td role="cell" data-label="Repository name">
         This example is not responsive. Adjacent
@@ -21408,7 +21401,7 @@ For sticky columns to function correctly, the parent table's width must be contr
 ```html
 <div class="pf-c-scroll-inner-wrapper">
   <table
-    class="pf-c-table"
+    class="pf-c-table pf-m-expandable"
     role="grid"
     aria-label="This is a nested column header table example"
     id="nested-columns-expandable-example"
@@ -22662,6 +22655,671 @@ For sticky columns to function correctly, the parent table's width must be contr
 | `.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
+
+Basic striped table rows are supported on tables with a single `<tbody>` element and expandable tables by applying `.pf-m-striped` to the `.pf-c-table` element, which applies striped styling to odd table rows. For more complex tables, `.pf-m-striped` can be applied directly to the `<tbody>` and `<tr>` elements. The class `.pf-m-striped-even` can be applied to `<tbody>` elements to apply striped styling to the even rows in the table body. This is for use in tables with multiple `<tbody>` elements where even row striping may be needed to ensure visual consistency.
+
+### Striped table example
+
+```html
+<table
+  class="pf-c-table pf-m-grid-md pf-m-striped"
+  role="grid"
+  aria-label="This is a striped table example"
+  id="table-striped"
+>
+  <caption>This is the table caption</caption>
+  <thead>
+    <tr role="row">
+      <th role="columnheader" scope="col">Repositories</th>
+      <th role="columnheader" scope="col">Branches</th>
+      <th role="columnheader" scope="col">Pull requests</th>
+      <th role="columnheader" scope="col">Workspaces</th>
+      <th role="columnheader" scope="col">Last commit</th>
+    </tr>
+  </thead>
+
+  <tbody role="rowgroup">
+    <tr role="row">
+      <td role="cell" data-label="Repository name">Repository 1</td>
+      <td role="cell" data-label="Branches">10</td>
+      <td role="cell" data-label="Pull requests">25</td>
+      <td role="cell" data-label="Workspaces">5</td>
+      <td role="cell" data-label="Last commit">2 days ago</td>
+    </tr>
+
+    <tr role="row">
+      <td role="cell" data-label="Repository name">Repository 2</td>
+      <td role="cell" data-label="Branches">10</td>
+      <td role="cell" data-label="Pull requests">25</td>
+      <td role="cell" data-label="Workspaces">5</td>
+      <td role="cell" data-label="Last commit">2 days ago</td>
+    </tr>
+
+    <tr role="row">
+      <td role="cell" data-label="Repository name">Repository 3</td>
+      <td role="cell" data-label="Branches">10</td>
+      <td role="cell" data-label="Pull requests">25</td>
+      <td role="cell" data-label="Workspaces">5</td>
+      <td role="cell" data-label="Last commit">2 days ago</td>
+    </tr>
+
+    <tr role="row">
+      <td role="cell" data-label="Repository name">Repository 4</td>
+      <td role="cell" data-label="Branches">10</td>
+      <td role="cell" data-label="Pull requests">25</td>
+      <td role="cell" data-label="Workspaces">5</td>
+      <td role="cell" data-label="Last commit">2 days ago</td>
+    </tr>
+  </tbody>
+</table>
+
+```
+
+### Striped expandable table example
+
+```html
+<table
+  class="pf-c-table pf-m-expandable pf-m-grid-lg pf-m-striped"
+  role="grid"
+  aria-label="Striped expandable table example"
+  id="table-striped-expandable"
+>
+  <thead>
+    <tr role="row">
+      <td></td>
+      <td class="pf-c-table__check" role="cell">
+        <label>
+          <input
+            type="checkbox"
+            name="table-striped-expandable-checkrowthead"
+            aria-label="Select all rows"
+          />
+        </label>
+      </td>
+      <th
+        class="pf-m-width-30 pf-c-table__sort pf-m-selected"
+        role="columnheader"
+        aria-sort="ascending"
+        scope="col"
+      >
+        <button class="pf-c-table__button">
+          <div class="pf-c-table__button-content">
+            <span class="pf-c-table__text">Repositories</span>
+            <span class="pf-c-table__sort-indicator">
+              <i class="fas fa-long-arrow-alt-up"></i>
+            </span>
+          </div>
+        </button>
+      </th>
+      <th
+        class="pf-c-table__sort"
+        role="columnheader"
+        aria-sort="none"
+        scope="col"
+      >
+        <button class="pf-c-table__button">
+          <div class="pf-c-table__button-content">
+            <span class="pf-c-table__text">Branches</span>
+            <span class="pf-c-table__sort-indicator">
+              <i class="fas fa-arrows-alt-v"></i>
+            </span>
+          </div>
+        </button>
+      </th>
+      <th
+        class="pf-c-table__sort"
+        role="columnheader"
+        aria-sort="none"
+        scope="col"
+      >
+        <button class="pf-c-table__button">
+          <div class="pf-c-table__button-content">
+            <span class="pf-c-table__text">Pull requests</span>
+            <span class="pf-c-table__sort-indicator">
+              <i class="fas fa-arrows-alt-v"></i>
+            </span>
+          </div>
+        </button>
+      </th>
+      <td></td>
+      <td></td>
+    </tr>
+  </thead>
+
+  <tbody class="pf-m-expanded" role="rowgroup">
+    <tr role="row">
+      <td class="pf-c-table__toggle" role="cell">
+        <button
+          class="pf-c-button pf-m-plain pf-m-expanded"
+          aria-labelledby="table-striped-expandable-node1 table-striped-expandable-expandable-toggle1"
+          id="table-striped-expandable-expandable-toggle1"
+          aria-label="Details"
+          aria-controls="table-striped-expandable-content1"
+          aria-expanded="true"
+        >
+          <div class="pf-c-table__toggle-icon">
+            <i class="fas fa-angle-down" aria-hidden="true"></i>
+          </div>
+        </button>
+      </td>
+
+      <td class="pf-c-table__check" role="cell">
+        <label>
+          <input
+            type="checkbox"
+            name="table-striped-expandable-checkrow1"
+            aria-labelledby="table-striped-expandable-node1"
+          />
+        </label>
+      </td>
+      <th role="columnheader" data-label="Data label name">
+        <div id="table-striped-expandable-node1">Node 1</div>
+        <a href="#">siemur/test-space</a>
+      </th>
+      <td role="cell" data-label="Branches">10</td>
+      <td role="cell" data-label="Pull requests">25</td>
+      <td role="cell" data-label="Action">
+        <a href="#">Link 1</a>
+      </td>
+      <td class="pf-c-table__action" role="cell">
+        <div class="pf-c-dropdown">
+          <button
+            class="pf-c-dropdown__toggle pf-m-plain"
+            id="table-striped-expandable-dropdown-kebab-1-button"
+            aria-expanded="false"
+            type="button"
+            aria-label="Actions"
+          >
+            <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+          </button>
+          <ul
+            class="pf-c-dropdown__menu pf-m-align-right"
+            aria-labelledby="table-striped-expandable-dropdown-kebab-1-button"
+            hidden
+          >
+            <li>
+              <a class="pf-c-dropdown__menu-item" href="#">Link</a>
+            </li>
+            <li>
+              <button class="pf-c-dropdown__menu-item" type="button">Action</button>
+            </li>
+            <li>
+              <a
+                class="pf-c-dropdown__menu-item pf-m-disabled"
+                href="#"
+                aria-disabled="true"
+                tabindex="-1"
+              >Disabled link</a>
+            </li>
+            <li>
+              <button
+                class="pf-c-dropdown__menu-item"
+                type="button"
+                disabled
+              >Disabled action</button>
+            </li>
+            <li class="pf-c-divider" role="separator"></li>
+            <li>
+              <a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
+            </li>
+          </ul>
+        </div>
+      </td>
+    </tr>
+
+    <tr class="pf-c-table__expandable-row pf-m-expanded" role="row">
+      <td></td>
+      <td></td>
+      <td role="cell" colspan="4" id="table-striped-expandable-content1">
+        <div
+          class="pf-c-table__expandable-row-content"
+        >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
+      </td>
+      <td></td>
+    </tr>
+  </tbody>
+
+  <tbody role="rowgroup">
+    <tr role="row">
+      <td class="pf-c-table__toggle" role="cell">
+        <button
+          class="pf-c-button pf-m-plain"
+          aria-labelledby="table-striped-expandable-node2 table-striped-expandable-expandable-toggle2"
+          id="table-striped-expandable-expandable-toggle2"
+          aria-label="Details"
+          aria-controls="table-striped-expandable-content2"
+        >
+          <div class="pf-c-table__toggle-icon">
+            <i class="fas fa-angle-down" aria-hidden="true"></i>
+          </div>
+        </button>
+      </td>
+
+      <td class="pf-c-table__check" role="cell">
+        <label>
+          <input
+            type="checkbox"
+            name="table-striped-expandable-checkrow2"
+            aria-labelledby="table-striped-expandable-node2"
+          />
+        </label>
+      </td>
+      <th role="columnheader" data-label="Data label name">
+        <div id="table-striped-expandable-node2">Node 2</div>
+        <a href="#">siemur/test-space</a>
+      </th>
+      <td role="cell" data-label="Branches">10</td>
+      <td role="cell" data-label="Pull requests">25</td>
+      <td role="cell" data-label="Action">
+        <a href="#">Link 2</a>
+      </td>
+      <td class="pf-c-table__action" role="cell">
+        <div class="pf-c-dropdown">
+          <button
+            class="pf-c-dropdown__toggle pf-m-plain"
+            id="table-striped-expandable-dropdown-kebab-2-button"
+            aria-expanded="false"
+            type="button"
+            aria-label="Actions"
+          >
+            <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+          </button>
+          <ul
+            class="pf-c-dropdown__menu pf-m-align-right"
+            aria-labelledby="table-striped-expandable-dropdown-kebab-2-button"
+            hidden
+          >
+            <li>
+              <a class="pf-c-dropdown__menu-item" href="#">Link</a>
+            </li>
+            <li>
+              <button class="pf-c-dropdown__menu-item" type="button">Action</button>
+            </li>
+            <li>
+              <a
+                class="pf-c-dropdown__menu-item pf-m-disabled"
+                href="#"
+                aria-disabled="true"
+                tabindex="-1"
+              >Disabled link</a>
+            </li>
+            <li>
+              <button
+                class="pf-c-dropdown__menu-item"
+                type="button"
+                disabled
+              >Disabled action</button>
+            </li>
+            <li class="pf-c-divider" role="separator"></li>
+            <li>
+              <a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
+            </li>
+          </ul>
+        </div>
+      </td>
+    </tr>
+
+    <tr class="pf-c-table__expandable-row" role="row">
+      <td role="cell" colspan="7" id="table-striped-expandable-content2">
+        <div
+          class="pf-c-table__expandable-row-content"
+        >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
+      </td>
+    </tr>
+  </tbody>
+
+  <tbody class="pf-m-expanded" role="rowgroup">
+    <tr role="row">
+      <td class="pf-c-table__toggle" role="cell">
+        <button
+          class="pf-c-button pf-m-plain pf-m-expanded"
+          aria-labelledby="table-striped-expandable-node3 table-striped-expandable-expandable-toggle3"
+          id="table-striped-expandable-expandable-toggle3"
+          aria-label="Details"
+          aria-controls="table-striped-expandable-content3"
+          aria-expanded="true"
+        >
+          <div class="pf-c-table__toggle-icon">
+            <i class="fas fa-angle-down" aria-hidden="true"></i>
+          </div>
+        </button>
+      </td>
+
+      <td class="pf-c-table__check" role="cell">
+        <label>
+          <input
+            type="checkbox"
+            name="table-striped-expandable-checkrow3"
+            aria-labelledby="table-striped-expandable-node3"
+          />
+        </label>
+      </td>
+      <th role="columnheader" data-label="Data label name">
+        <div id="table-striped-expandable-node3">Node 3</div>
+        <a href="#">siemur/test-space</a>
+      </th>
+      <td role="cell" data-label="Branches">10</td>
+      <td role="cell" data-label="Pull requests">25</td>
+      <td role="cell" data-label="Action">
+        <a href="#">Link 3</a>
+      </td>
+      <td class="pf-c-table__action" role="cell">
+        <div class="pf-c-dropdown">
+          <button
+            class="pf-c-dropdown__toggle pf-m-plain"
+            id="table-striped-expandable-dropdown-kebab-3-button"
+            aria-expanded="false"
+            type="button"
+            aria-label="Actions"
+          >
+            <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+          </button>
+          <ul
+            class="pf-c-dropdown__menu pf-m-align-right"
+            aria-labelledby="table-striped-expandable-dropdown-kebab-3-button"
+            hidden
+          >
+            <li>
+              <a class="pf-c-dropdown__menu-item" href="#">Link</a>
+            </li>
+            <li>
+              <button class="pf-c-dropdown__menu-item" type="button">Action</button>
+            </li>
+            <li>
+              <a
+                class="pf-c-dropdown__menu-item pf-m-disabled"
+                href="#"
+                aria-disabled="true"
+                tabindex="-1"
+              >Disabled link</a>
+            </li>
+            <li>
+              <button
+                class="pf-c-dropdown__menu-item"
+                type="button"
+                disabled
+              >Disabled action</button>
+            </li>
+            <li class="pf-c-divider" role="separator"></li>
+            <li>
+              <a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
+            </li>
+          </ul>
+        </div>
+      </td>
+    </tr>
+
+    <tr class="pf-c-table__expandable-row pf-m-expanded" role="row">
+      <td role="cell" colspan="7" id="table-striped-expandable-content3">
+        <div
+          class="pf-c-table__expandable-row-content"
+        >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
+      </td>
+    </tr>
+  </tbody>
+
+  <tbody class="pf-m-expanded" role="rowgroup">
+    <tr role="row">
+      <td class="pf-c-table__toggle" role="cell">
+        <button
+          class="pf-c-button pf-m-plain pf-m-expanded"
+          aria-labelledby="table-striped-expandable-node4 table-striped-expandable-expandable-toggle4"
+          id="table-striped-expandable-expandable-toggle4"
+          aria-label="Details"
+          aria-controls="table-striped-expandable-content4"
+          aria-expanded="true"
+        >
+          <div class="pf-c-table__toggle-icon">
+            <i class="fas fa-angle-down" aria-hidden="true"></i>
+          </div>
+        </button>
+      </td>
+
+      <td class="pf-c-table__check" role="cell">
+        <label>
+          <input
+            type="checkbox"
+            name="table-striped-expandable-checkrow4"
+            aria-labelledby="table-striped-expandable-node4"
+          />
+        </label>
+      </td>
+      <th role="columnheader" data-label="Data label name">
+        <div id="table-striped-expandable-node4">Node 4</div>
+        <a href="#">siemur/test-space</a>
+      </th>
+      <td role="cell" data-label="Branches">10</td>
+      <td role="cell" data-label="Pull requests">25</td>
+      <td role="cell" data-label="Action">
+        <a href="#">Link 4</a>
+      </td>
+      <td class="pf-c-table__action" role="cell">
+        <div class="pf-c-dropdown">
+          <button
+            class="pf-c-dropdown__toggle pf-m-plain"
+            id="table-striped-expandable-dropdown-kebab-4-button"
+            aria-expanded="false"
+            type="button"
+            aria-label="Actions"
+          >
+            <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+          </button>
+          <ul
+            class="pf-c-dropdown__menu pf-m-align-right"
+            aria-labelledby="table-striped-expandable-dropdown-kebab-4-button"
+            hidden
+          >
+            <li>
+              <a class="pf-c-dropdown__menu-item" href="#">Link</a>
+            </li>
+            <li>
+              <button class="pf-c-dropdown__menu-item" type="button">Action</button>
+            </li>
+            <li>
+              <a
+                class="pf-c-dropdown__menu-item pf-m-disabled"
+                href="#"
+                aria-disabled="true"
+                tabindex="-1"
+              >Disabled link</a>
+            </li>
+            <li>
+              <button
+                class="pf-c-dropdown__menu-item"
+                type="button"
+                disabled
+              >Disabled action</button>
+            </li>
+            <li class="pf-c-divider" role="separator"></li>
+            <li>
+              <a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
+            </li>
+          </ul>
+        </div>
+      </td>
+    </tr>
+
+    <tr class="pf-c-table__expandable-row pf-m-expanded" role="row">
+      <td
+        class="pf-m-no-padding"
+        role="cell"
+        colspan="7"
+        id="table-striped-expandable-content4"
+      >
+        <div
+          class="pf-c-table__expandable-row-content"
+        >Expandable row content has no padding.</div>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+```
+
+### Striped multiple tbody example
+
+```html
+<table
+  class="pf-c-table pf-m-grid-md"
+  role="grid"
+  aria-label="This is a striped tbody example"
+  id="table-striped-tbody"
+>
+  <caption>This is the table caption</caption>
+  <thead>
+    <tr role="row">
+      <th role="columnheader" scope="col">Repositories</th>
+      <th role="columnheader" scope="col">Branches</th>
+      <th role="columnheader" scope="col">Pull requests</th>
+      <th role="columnheader" scope="col">Workspaces</th>
+      <th role="columnheader" scope="col">Last commit</th>
+    </tr>
+  </thead>
+
+  <tbody class="pf-m-striped" role="rowgroup">
+    <tr role="row">
+      <td role="cell" data-label="Repository name">
+        tbody 1 - Repository 1
+        <br />
+        <small>(odd rows striped)</small>
+      </td>
+      <td role="cell" data-label="Branches">10</td>
+      <td role="cell" data-label="Pull requests">25</td>
+      <td role="cell" data-label="Workspaces">5</td>
+      <td role="cell" data-label="Last commit">2 days ago</td>
+    </tr>
+
+    <tr role="row">
+      <td role="cell" data-label="Repository name">tbody 1 - Repository 2</td>
+      <td role="cell" data-label="Branches">10</td>
+      <td role="cell" data-label="Pull requests">25</td>
+      <td role="cell" data-label="Workspaces">5</td>
+      <td role="cell" data-label="Last commit">2 days ago</td>
+    </tr>
+
+    <tr role="row">
+      <td role="cell" data-label="Repository name">
+        tbody 1 - Repository 3
+        <br />
+        <small>(odd rows striped)</small>
+      </td>
+      <td role="cell" data-label="Branches">10</td>
+      <td role="cell" data-label="Pull requests">25</td>
+      <td role="cell" data-label="Workspaces">5</td>
+      <td role="cell" data-label="Last commit">2 days ago</td>
+    </tr>
+  </tbody>
+
+  <tbody class="pf-m-striped-even" role="rowgroup">
+    <tr role="row">
+      <td role="cell" data-label="Repository name">tbody 2 - Repository 4</td>
+      <td role="cell" data-label="Branches">10</td>
+      <td role="cell" data-label="Pull requests">25</td>
+      <td role="cell" data-label="Workspaces">5</td>
+      <td role="cell" data-label="Last commit">2 days ago</td>
+    </tr>
+
+    <tr role="row">
+      <td role="cell" data-label="Repository name">
+        tbody 2 - Repository 5
+        <br />
+        <small>(even rows striped using `.pf-m-striped-even`)</small>
+      </td>
+      <td role="cell" data-label="Branches">10</td>
+      <td role="cell" data-label="Pull requests">25</td>
+      <td role="cell" data-label="Workspaces">5</td>
+      <td role="cell" data-label="Last commit">2 days ago</td>
+    </tr>
+
+    <tr role="row">
+      <td role="cell" data-label="Repository name">tbody 2 - Repository 6</td>
+      <td role="cell" data-label="Branches">10</td>
+      <td role="cell" data-label="Pull requests">25</td>
+      <td role="cell" data-label="Workspaces">5</td>
+      <td role="cell" data-label="Last commit">2 days ago</td>
+    </tr>
+
+    <tr role="row">
+      <td role="cell" data-label="Repository name">
+        tbody 2 - Repository 7
+        <br />
+        <small>(even rows striped using `.pf-m-striped-even`)</small>
+      </td>
+      <td role="cell" data-label="Branches">10</td>
+      <td role="cell" data-label="Pull requests">25</td>
+      <td role="cell" data-label="Workspaces">5</td>
+      <td role="cell" data-label="Last commit">2 days ago</td>
+    </tr>
+  </tbody>
+</table>
+
+```
+
+### Striped tr example
+
+```html
+<table
+  class="pf-c-table pf-m-grid-md pf-m-striped"
+  role="grid"
+  aria-label="This is a striped tr example"
+  id="table-striped-tr"
+>
+  <caption>This is the table caption</caption>
+  <thead>
+    <tr role="row">
+      <th role="columnheader" scope="col">Repositories</th>
+      <th role="columnheader" scope="col">Branches</th>
+      <th role="columnheader" scope="col">Pull requests</th>
+      <th role="columnheader" scope="col">Workspaces</th>
+      <th role="columnheader" scope="col">Last commit</th>
+    </tr>
+  </thead>
+
+  <tbody role="rowgroup">
+    <tr class="pf-m-striped" role="row">
+      <td role="cell" data-label="Repository name">Repository 1</td>
+      <td role="cell" data-label="Branches">10</td>
+      <td role="cell" data-label="Pull requests">25</td>
+      <td role="cell" data-label="Workspaces">5</td>
+      <td role="cell" data-label="Last commit">2 days ago</td>
+    </tr>
+
+    <tr role="row">
+      <td role="cell" data-label="Repository name">Repository 2</td>
+      <td role="cell" data-label="Branches">10</td>
+      <td role="cell" data-label="Pull requests">25</td>
+      <td role="cell" data-label="Workspaces">5</td>
+      <td role="cell" data-label="Last commit">2 days ago</td>
+    </tr>
+
+    <tr class="pf-m-striped" role="row">
+      <td role="cell" data-label="Repository name">Repository 3</td>
+      <td role="cell" data-label="Branches">10</td>
+      <td role="cell" data-label="Pull requests">25</td>
+      <td role="cell" data-label="Workspaces">5</td>
+      <td role="cell" data-label="Last commit">2 days ago</td>
+    </tr>
+
+    <tr role="row">
+      <td role="cell" data-label="Repository name">Repository 4</td>
+      <td role="cell" data-label="Branches">10</td>
+      <td role="cell" data-label="Pull requests">25</td>
+      <td role="cell" data-label="Workspaces">5</td>
+      <td role="cell" data-label="Last commit">2 days ago</td>
+    </tr>
+  </tbody>
+</table>
+
+```
+
+### 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. |
+
 ## Documentation
 
 ### Overview