feature: css - common styles + test

src/styles/hubl-framework/tables/_index.scss

@@ -0,0 +1,5 @@
+@import 'tables';
+@import 'cells';
+@import 'headers';
+@import 'bodies';
+@import 'sizes';

src/styles/hubl-framework/tables/bodies.scss

@@ -0,0 +1,22 @@
+.table-body {
+  display: table-row-group;
+  border-left: 1px solid #C9C8C8;
+
+  &>div {
+    display: contents;
+
+    &>solid-display {
+      display: table-row;
+
+      &>div {
+        display: contents;
+
+        &>.table-cell {
+          border-bottom: 1px solid #C9C8C8;
+          border-right: 1px solid #C9C8C8;
+          height: 64px;
+        }
+      }
+    }
+  }
+}

src/styles/hubl-framework/tables/cells.scss

@@ -0,0 +1,6 @@
+.table-cell {
+  display: table-cell;
+  white-space: nowrap;
+  text-align: center;
+  vertical-align: middle;
+}

src/styles/hubl-framework/tables/headers.scss

@@ -0,0 +1,20 @@
+.table-header {
+  display: table-header-group;
+  text-align: center;
+  vertical-align: middle;
+  border-top: 1px solid #C9C8C8;
+  border-bottom: 1px solid #C9C8C8;
+  border-left: 1px solid #C9C8C8;
+  font-size: 16px;
+  font-weight: 600;
+  letter-spacing: 0.25px;
+
+  &>.table-cell {
+    height: 50px;
+    border-right: 1px solid white;
+
+    &:last-child {
+      border-right: 1px solid #C9C8C8;
+    }
+  }
+}

src/styles/hubl-framework/tables/sizes.scss

@@ -0,0 +1,22 @@
+.table-body,
+.table-header {
+
+  .w280 {
+    width: 280px;
+  }
+  .w450 {
+    width: 450px;
+  }
+  .w370 {
+    width: 370px;
+  }
+  .w230 {
+    width: 230px;
+  }
+  .w70 {
+    width: 70px;
+  }
+  .w162 {
+    width: 162px;
+  }
+}

src/styles/hubl-framework/tables/tables.scss

@@ -0,0 +1,14 @@
+.table-wrapper {
+  overflow: auto;
+  position: relative;
+  width: 100%;
+
+  .table {
+    border-collapse: collapse;
+    display: table;
+    overflow: auto;
+    table-layout: fixed;
+    width: 100%;
+    max-width: 100%;
+  }
+}