From a0201cdab022a0e73ae72d6e626a66fa1b7dc253 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 11 Jan 2021 14:26:19 +0300
Subject: [PATCH] Use flex in responsive demo

---
 .../showcase/components/table/tabledemo.html  |  1 +
 .../showcase/components/table/tabledemo.scss  | 20 +++++++++----------
 .../components/table/tableresponsivedemo.scss |  7 ++-----
 3 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/src/app/showcase/components/table/tabledemo.html b/src/app/showcase/components/table/tabledemo.html
index c2bbbb62d0d..028811669de 100755
--- a/src/app/showcase/components/table/tabledemo.html
+++ b/src/app/showcase/components/table/tabledemo.html
@@ -133,6 +133,7 @@ <h1>Table</h1>
                         {{customer.date | date: 'MM/dd/yyyy'}}
                     </td>
                     <td>
+                        <span class="p-column-title">Balance</span>
                         {{customer.balance | currency:'USD':'symbol'}}
                     </td>
                     <td>
diff --git a/src/app/showcase/components/table/tabledemo.scss b/src/app/showcase/components/table/tabledemo.scss
index 50bd4a0318d..97bb5f9aa68 100644
--- a/src/app/showcase/components/table/tabledemo.scss
+++ b/src/app/showcase/components/table/tabledemo.scss
@@ -75,23 +75,23 @@
     
                     > td {
                         text-align: left;
-                        display: block;
-                        border: 0 none !important;
-                        width: 100% !important;
-                        float: left;
-                        clear: left;
+                        width: 100%;
+                        display: flex;
+                        align-items: center;
                         border: 0 none;
     
                         .p-column-title {
-                            padding: .4rem;
                             min-width: 30%;
                             display: inline-block;
-                            margin: -.4rem 1rem -.4rem -.4rem;
                             font-weight: bold;
                         }
-    
-                        .p-progressbar {
-                            margin-top: .5rem;
+        
+                        p-progressbar {
+                            width: 100%;
+                        }
+
+                        &:last-child {
+                            border-bottom: 1px solid var(--surface-d);
                         }
                     }
                 }
diff --git a/src/app/showcase/components/table/tableresponsivedemo.scss b/src/app/showcase/components/table/tableresponsivedemo.scss
index 94b1e004141..67b7c0b0a65 100644
--- a/src/app/showcase/components/table/tableresponsivedemo.scss
+++ b/src/app/showcase/components/table/tableresponsivedemo.scss
@@ -15,17 +15,14 @@
 
                 .p-datatable-tbody > tr > td {
                     text-align: left;
-                    display: block;
                     width: 100%;
-                    float: left;
-                    clear: left;
+                    display: flex;
+                    align-items: center;
                     border: 0 none;
 
                     .p-column-title {
-                        padding: .4rem;
                         min-width: 30%;
                         display: inline-block;
-                        margin: -.4em 1em -.4em -.4rem;
                         font-weight: bold;
                     }