fix: fix IE11 #table default alignment + add table-layout modifier

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

@@ -11,7 +11,7 @@ import { css, Global } from '@emotion/core'
 
 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;`
+You may consider using `table-layout: fixed;`. You can use the modifier class in doing so: `.dnb-table--fixed`
 
 ### Working Demo
 
@@ -23,6 +23,7 @@ Check out a [working example on CodeSandbox](https://codesandbox.io/embed/eufemi
 
 To enhance or manipulate the the table style, you can make use of a couple helper classes:
 
+- `.dnb-table--fixed` Table Layout
 - `.dnb-table__th` Table Header
 - `.dnb-table__td` Table Data
 - `.dnb-table__tr` Table Row
@@ -32,8 +33,8 @@ To enhance or manipulate the the table style, you can make use of a couple helpe
 - `.dnb-table--sortable` Use this on a `th` - sortable column
 - `.dnb-table--active` Use this on a `th` - current column is sorted
 - `.dnb-table--reversed` Use this on a `th` - defines the order
-- `.dnb-table--right` Use this on a `th`, `td` or `tr` - alignes the content to the right (or use `align="right"`)
-- `.dnb-table--center` Use this on a `th`, `td` or `tr` - alignes the content to the left (or use `align="center"`)
+- `.dnb-table--right` Use this on a `th`, `td` or `tr` - align the content to the right (or use `align="right"`)
+- `.dnb-table--center` Use this on a `th`, `td` or `tr` - align the content to the left (or use `align="center"`)
 
 <!-- - `.dnb-table--small` Use this on a `th`, `td` or `tr` - [font-size](/uilib/typography/font-size) is then `small` (`x-small` is also supported, but should generally be avoided due to bad accessibility) -->
 
@@ -147,7 +148,7 @@ To enhance or manipulate the the table style, you can make use of a couple helpe
 
 <ComponentBox hideCode data-dnb-test="table-sticky">
 {`
-<Table sticky="true" sticky_offset="4rem">
+<Table sticky="true" sticky_offset="4rem" className="dnb-table--fixed">
   <caption className="dnb-sr-only">A Table Caption</caption>
   <thead>
     <tr>

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

@@ -28,6 +28,10 @@
   border-spacing: 0;
   border-collapse: collapse;
 
+  &--fixed {
+    table-layout: fixed;
+  }
+
   &__sticky-helper > td {
     display: block;
     overflow: hidden;
@@ -61,9 +65,11 @@
     color: var(--color-emerald-green);
 
     vertical-align: bottom;
-  }
-  & > thead > tr > th,
-  & &__th {
+
+    &:not([align]):not(.dnb-table--left):not(.dnb-table--right):not(.dnb-table--center) {
+      text-align: inherit;
+    }
+
     // Firefox fix
     @supports (-moz-appearance: meterbar) and
       (background-blend-mode: difference, normal) {
@@ -267,6 +273,7 @@
   tr.sticky {
     top: 0;
   }
+  /* stylelint-disable-next-line */
   tr.sticky th {
     position: sticky;
     top: inherit;

packages/dnb-ui-lib/stories/elements/Table.js

@@ -29,7 +29,16 @@ const CustomWrapper = styled(Wrapper)`
 export default [
   'Table',
   () => (
-    <CustomWrapper className="dnb-spacing">
+    <CustomWrapper className="dnb-spacing show-overflow">
+      <Box>
+        <Button
+          variant="tertiary"
+          icon="arrow_down"
+          text="Donec Phasellus odio magnis sit neque commodo nisl
+                hendrerit viverra consectet Sortable"
+          wrap
+        />
+      </Box>
       <Box>
         <table className="dnb-table dnb-table--small">
           <thead>
@@ -38,8 +47,8 @@ export default [
             >
               <th
                 colSpan="2"
-                align="right"
-                // className="dnb-table--right"
+                // align="right"
+                className="dnb-table--right"
                 // className="dnb-table--small"
               >
                 Only text In nam at lacinia blandit risus turpis cras
@@ -49,8 +58,9 @@ export default [
                 erat egestas felis rhoncus lobortis dis
               </th>
               <th
-                align="right"
-                className="dnb-table--sortable dnb-table--reversed"
+                // align="right"
+                className="dnb-table--right dnb-table--sortable dnb-table--reversed"
+                // className="dnb-table--sortable dnb-table--reversed"
               >
                 <Button
                   variant="tertiary"