fix(Table): remove usage of pseudo elements inside table rows (#1704)

packages/dnb-design-system-portal/src/docs/uilib/components/table/Examples.js

@@ -224,7 +224,7 @@ export const TableSticky = () => (
       </td>
       <td>Column 4</td>
     </tr>
-    <tr>
+    <tr id="scroll-to-tr-id">
       <td colSpan="2">Column which spans over two columns</td>
       <td>Column 3</td>
       <td>Column 4</td>

packages/dnb-eufemia/src/components/table/__tests__/Table.screenshot.test.tsx

@@ -70,7 +70,6 @@ describe('Table screenshot', () => {
       '[data-visual-test="table-classes"] th.dnb-table--sortable.dnb-table--reversed'
     const screenshot = await testPageScreenshot({
       style: {
-        // display:'block',
         'background-color': 'white',
       },
       styleSelector,
@@ -95,6 +94,20 @@ describe('Table screenshot', () => {
     })
     expect(screenshot).toMatchImageSnapshot()
   })
+
+  it('have to match sticky header', async () => {
+    const selector = '[data-visual-test="table-sticky"]'
+    const screenshot = await testPageScreenshot({
+      styleSelector,
+      selector,
+      executeBeforeSimulate: () => {
+        document.getElementById('scroll-to-tr-id').scrollIntoView({
+          behavior: 'auto',
+        })
+      },
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
 })
 
 describe('Table with skeleton screenshot', () => {

packages/dnb-eufemia/src/components/table/__tests__/__snapshots__/Table.test.tsx.snap

@@ -24,6 +24,7 @@ exports[`Table scss have to match default theme snapshot 1`] = `
   .dnb-table > tr > td,
   .dnb-table > thead > tr > th,
   .dnb-table > tbody > tr > td, .dnb-table__th, .dnb-table__td {
+    position: relative;
     font-size: var(--font-size-basis);
     line-height: var(--line-height-basis);
     border-spacing: 0;
@@ -58,19 +59,15 @@ exports[`Table scss have to match default theme snapshot 1`] = `
   .dnb-table .dnb-table__tr:not(.dnb-table__tr--odd):nth-of-type(2n),
   .dnb-table .dnb-table__tr--even {
     background-color: var(--color-lavender); }
-  .dnb-table > thead > tr,
-  .dnb-table > tbody > tr,
-  .dnb-table .dnb-table__tr {
-    position: relative; }
-  .dnb-table > thead > tr:last-of-type::after,
-  .dnb-table > tbody > tr:last-of-type::after,
-  .dnb-table > .dnb-table__tr:last-of-type::after {
+  .dnb-table > thead > tr > th::after,
+  .dnb-table > tbody > tr:last-of-type > td::after,
+  .dnb-table > thead > .dnb-table__tr > .dnb-table__th::after,
+  .dnb-table > tbody > .dnb-table__tr:last-of-type > .dnb-table__td::after {
     content: '';
     position: absolute;
     left: 0;
     right: 0;
     bottom: -1px;
-    z-index: 1;
     height: 1px;
     background-color: var(--color-black-8); }
   .dnb-table > thead > tr > th.dnb-table--sortable,

packages/dnb-eufemia/src/components/table/style/themes/dnb-table-theme-ui.scss

@@ -15,6 +15,8 @@
   & > tbody > tr > td,
   &__th,
   &__td {
+    position: relative;
+
     font-size: var(--font-size-basis);
     line-height: var(--line-height-basis);
     border-spacing: 0;
@@ -72,22 +74,16 @@
     background-color: var(--color-lavender);
   }
 
-  & > thead > tr,
-  & > tbody > tr,
-  & &__tr {
-    position: relative;
-  }
-
   // Border
-  & > thead > tr:last-of-type::after,
-  & > tbody > tr:last-of-type::after,
-  & > &__tr:last-of-type::after {
+  & > thead > tr > th::after,
+  & > tbody > tr:last-of-type > td::after,
+  & > thead > &__tr > &__th::after,
+  & > tbody > &__tr:last-of-type > &__td::after {
     content: '';
     position: absolute;
     left: 0;
     right: 0;
     bottom: -1px;
-    z-index: 1; // lower than "tr.sticky"
 
     height: 1px;
     background-color: var(--color-black-8);