fix: make #table style expandable in width

packages/dnb-design-system-portal/src/docs/uilib/elements/tables.md

@@ -9,6 +9,8 @@ import ComponentBox from 'Tags/ComponentBox'
 
 The following table has a default style. But in future, there will be several patterns and styles to choose from.
 
+You may consider using `table-layout: fixed;`.
+
 <ComponentBox reactLive hideCode data-dnb-test="table-default">
 {`
 <table className="dnb-table">

packages/dnb-ui-lib/src/style/elements/__tests__/Table.screenshot.test.js

@@ -12,16 +12,26 @@ describe('Table screenshot', () => {
   setupPageScreenshot({ url: '/uilib/elements/tables' })
   it('have to match the default choice of table styles', async () => {
     const screenshot = await testPageScreenshot({
+      style: {
+        width: '40rem'
+      },
       selector: '[data-dnb-test="table-default"] .dnb-table'
     })
     expect(screenshot).toMatchImageSnapshot()
   })
+  const style = {
+    display: 'block',
+    width: '40rem'
+  }
+  const styleSelector = '[data-dnb-test="table-default"] .dnb-table'
   it('have to match a sortable table header on hover', async () => {
     const selector =
       '[data-dnb-test="table-default"] th.dnb-table--sortable:not(.dnb-table--active)'
     const screenshot = await testPageScreenshot({
+      style,
+      styleSelector,
       selector,
-      simulateSelector: `${selector} button`,
+      simulateSelector: `${selector} button.dnb-button`,
       simulate: 'hover'
     })
     expect(screenshot).toMatchImageSnapshot()
@@ -30,8 +40,10 @@ describe('Table screenshot', () => {
     const selector =
       '[data-dnb-test="table-default"] th.dnb-table--sortable:not(.dnb-table--active)'
     const screenshot = await testPageScreenshot({
+      style,
+      styleSelector,
       selector,
-      simulateSelector: `${selector} button`,
+      simulateSelector: `${selector} button.dnb-button`,
       simulate: 'focus'
     })
     expect(screenshot).toMatchImageSnapshot()

packages/dnb-ui-lib/src/style/elements/table.scss

@@ -6,7 +6,8 @@
 @import '../../components/button/style/button-mixins.scss';
 
 @mixin tableStyle() {
-  display: block;
+  display: table;
+  table-layout: auto;
   width: 100%;
 
   overflow: auto;