From 2da23954732ade799a81d0549445ab7674e1d205 Mon Sep 17 00:00:00 2001
From: charlesh88 <charlesh88@gmail.com>
Date: Fri, 27 Jul 2018 18:04:06 -0700
Subject: [PATCH] Change table row layout to use flex

Fixes #2132
- flex styles applied;
- CSS reorganized for better DRY;
- Set height on <tr> so that <td>'s won't collapse when
all cells of a row have empty values. This can occur when columns are
hidden in a Telemetry Table.
---
 platform/features/table/res/sass/table.scss | 28 +++++++++++----------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/platform/features/table/res/sass/table.scss b/platform/features/table/res/sass/table.scss
index 534da1c432..9d498aafa7 100644
--- a/platform/features/table/res/sass/table.scss
+++ b/platform/features/table/res/sass/table.scss
@@ -35,28 +35,30 @@ mct-table {
     }
 
     .mct-table {
+        tr {
+            display: flex; // flex-flow defaults to row nowrap (which is what we want) so no need to define
+            height: 18px; // Needed when a row has empty values in its cells
+            align-items: stretch;
+        }
+
+        td, th {
+            box-sizing: border-box;
+            display: block;
+            flex: 1 0 auto;
+            white-space: nowrap;
+        }
+
         thead {
             display: block;
-            tr {
-                display: block;
-                white-space: nowrap;
-                th {
-                    display: inline-block;
-                    box-sizing: border-box;
-                }
-            }
         }
+
         tbody {
             tr {
                 position: absolute;
-                white-space: nowrap;
-                display: block;
             }
+
             td {
-                white-space: nowrap;
                 overflow: hidden;
-                box-sizing: border-box;
-                display: inline-block;
             }
         }
     }