diff --git a/packages/dnb-design-system-portal/src/pages/uilib/elements/tables.md b/packages/dnb-design-system-portal/src/pages/uilib/elements/tables.md
index fc3ef9ef1fd..c1ed9d90315 100644
--- a/packages/dnb-design-system-portal/src/pages/uilib/elements/tables.md
+++ b/packages/dnb-design-system-portal/src/pages/uilib/elements/tables.md
@@ -7,14 +7,16 @@ import { IconPrimary } from 'dnb-ui-lib/src'
## Tables
-
+
+{`
+
Column 1 + 2 |
Column 3
|
-
+ |
Column 4
@@ -50,3 +52,49 @@ import { IconPrimary } from 'dnb-ui-lib/src'
|
+`}
+
+
+
diff --git a/packages/dnb-ui-lib/src/style/elements/__tests__/Table.screenshot.test.js b/packages/dnb-ui-lib/src/style/elements/__tests__/Table.screenshot.test.js
new file mode 100644
index 00000000000..a8183646cfc
--- /dev/null
+++ b/packages/dnb-ui-lib/src/style/elements/__tests__/Table.screenshot.test.js
@@ -0,0 +1,19 @@
+/**
+ * Screenshot Test
+ * This file will not run on "test:staged" because we dont require any related files
+ */
+
+import {
+ testPageScreenshot,
+ setupPageScreenshot
+} from '../../../core/jest/jestSetupScreenshots'
+
+describe('Table screenshot', () => {
+ setupPageScreenshot({ url: '/uilib/elements/tables' })
+ it('have to match the default choice of table styles', async () => {
+ const screenshot = await testPageScreenshot({
+ selector: '[data-dnb-test="table"]'
+ })
+ expect(screenshot).toMatchImageSnapshot()
+ })
+})
diff --git a/packages/dnb-ui-lib/src/style/elements/__tests__/__snapshots__/table-screenshot-test-js-table-screenshot-have-to-match-the-default-choice-of-table-styles-1-b0b7d.snap.png b/packages/dnb-ui-lib/src/style/elements/__tests__/__snapshots__/table-screenshot-test-js-table-screenshot-have-to-match-the-default-choice-of-table-styles-1-b0b7d.snap.png
new file mode 100644
index 00000000000..2065bd8bd26
Binary files /dev/null and b/packages/dnb-ui-lib/src/style/elements/__tests__/__snapshots__/table-screenshot-test-js-table-screenshot-have-to-match-the-default-choice-of-table-styles-1-b0b7d.snap.png differ
diff --git a/packages/dnb-ui-lib/src/style/themes/theme-ui/table.scss b/packages/dnb-ui-lib/src/style/themes/theme-ui/table.scss
index e97fb52442a..dbebc7a0fec 100644
--- a/packages/dnb-ui-lib/src/style/themes/theme-ui/table.scss
+++ b/packages/dnb-ui-lib/src/style/themes/theme-ui/table.scss
@@ -49,8 +49,13 @@ table td {
padding-bottom: 1.1875rem;
}
table tr {
- background-color: #fff;
+ background-color: var(--color-white);
}
-table tr:nth-child(2n) {
+table tr:nth-of-type(2n) {
background-color: var(--color-mint-green-12);
}
+table tr:last-of-type td {
+ // to get the perfect height of pixles, to this:
+ padding-bottom: calc(1.1875rem - 1px);
+ border-bottom: 1px solid var(--color-mint-green-50);
+}