Merge pull request #52 from Azure-Samples/update-table-in-js-sample

Update table display in vanilla JS sample

Author: derisen

1-Authentication/0-sign-in-vanillajs/App/public/index.html

@@ -24,24 +24,29 @@
             <button type="button" id="signOut" class="btn btn-success d-none" onclick="signOut()">Sign-out</button>
         </div>
     </nav>
-    <br>
-    <h5 id="title-div" class="card-header text-center">Vanilla JavaScript single-page application secured with MSAL.js
-    </h5>
-    <h5 id="welcome-div" class="card-header text-center d-none"></h5>
-    <br>
-    <div class="table-responsive-ms" id="table">
-        <table id="table-div" class="table table-striped d-none">
-            <thead id="table-head-div">
-                <tr>
-                    <th>Claim Type</th>
-                    <th>Value</th>
-                    <th>Description</th>
-                </tr>
-            </thead>
-            <tbody id="table-body-div">
-            </tbody>
-        </table>
-    </div>
+    <br />
+    <div class="container">
+            <div class="row">
+                <br />
+                 <h5 id="title-div" class="card-header text-center">
+                    Vanilla JavaScript single-page application secured with MSAL.js
+                </h5>
+                <br />
+                <h5 id="welcome-div" class="card-header text-center d-none"></h5>
+                <div class="table-responsive">
+                    <table id="table-div" class="table table-striped table-bordered d-none" id="table">
+                        <thead id="table-head-div">
+                            <tr>
+                                <th>Claim Type</th>
+                                <th>Value</th>
+                                <th>Description</th>
+                            </tr>
+                        </thead>
+                        <tbody id="table-body-div"></tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
     <!-- importing bootstrap.js and supporting js libraries -->
     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
         integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">

1-Authentication/0-sign-in-vanillajs/App/public/styles.css

@@ -2,8 +2,8 @@
     padding: .5rem 1rem !important;
 }
 
-.table-responsive-ms {
-    max-height: 800px !important;
+.table-responsive {
+    max-height:  38rem !important;
     padding-left: 50px;
     padding-right: 50px;
 }