From 919ff123773b7cf4e6da39fec08327eb58d89fe6 Mon Sep 17 00:00:00 2001
From: Stefanie Fluin <sjtrimble@gmail.com>
Date: Wed, 3 May 2017 10:32:15 -0700
Subject: [PATCH] fix(aio): cheatsheet table layout fix

---
 aio/content/guide/cheatsheet.md      | 28 +++++++++++++---------------
 aio/src/styles/2-modules/_table.scss |  8 ++++++++
 2 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/aio/content/guide/cheatsheet.md b/aio/content/guide/cheatsheet.md
index 50b123fa61..c207efeb46 100644
--- a/aio/content/guide/cheatsheet.md
+++ b/aio/content/guide/cheatsheet.md
@@ -3,9 +3,8 @@ Cheat Sheet
 
 @description
 
-<div class="l-content-small grid-fluid docs-content cheatsheet">
-
-<table>
+<div id="cheatsheet">
+<table class="is-full-width is-fixed-layout">
 <tbody><tr>
 <th>Bootstrapping</th>
 <th><p><code>import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';</code>
@@ -19,7 +18,7 @@ Cheat Sheet
 </tr>
 </tbody></table>
 
-<table>
+<table class="is-full-width is-fixed-layout">
 <tbody><tr>
 <th>NgModules</th>
 <th><p><code>import { NgModule } from '@angular/core';</code>
@@ -54,7 +53,7 @@ is available to <code>declarations</code> of this module.</p>
 </tr>
 </tbody></table>
 
-<table>
+<table class="is-full-width is-fixed-layout">
 <tbody><tr>
 <th>Template syntax</th>
 <th></th>
@@ -120,7 +119,7 @@ is available to <code>declarations</code> of this module.</p>
 </tr>
 </tbody></table>
 
-<table>
+<table class="is-full-width is-fixed-layout">
 <tbody><tr>
 <th>Built-in directives</th>
 <th><p><code>import { CommonModule } from '@angular/common';</code>
@@ -146,7 +145,7 @@ is available to <code>declarations</code> of this module.</p>
 </tr>
 </tbody></table>
 
-<table>
+<table class="is-full-width is-fixed-layout">
 <tbody><tr>
 <th>Forms</th>
 <th><p><code>import { FormsModule } from '@angular/forms';</code>
@@ -160,7 +159,7 @@ is available to <code>declarations</code> of this module.</p>
 </tr>
 </tbody></table>
 
-<table>
+<table class="is-full-width is-fixed-layout">
 <tbody><tr>
 <th>Class decorators</th>
 <th><p><code>import { Directive, ... } from '@angular/core';</code>
@@ -187,7 +186,7 @@ is available to <code>declarations</code> of this module.</p>
 </tr>
 </tbody></table>
 
-<table>
+<table class="is-full-width is-fixed-layout">
 <tbody><tr>
 <th>Directive configuration</th>
 <th><p><code>@Directive({ property1: value1, ... })</code>
@@ -207,7 +206,7 @@ is available to <code>declarations</code> of this module.</p>
 </tr>
 </tbody></table>
 
-<table>
+<table class="is-full-width is-fixed-layout">
 <tbody><tr>
 <th>Component configuration</th>
 <th><p>
@@ -234,7 +233,7 @@ so the <code>@Directive</code> configuration applies to components as well</p>
 </tr>
 </tbody></table>
 
-<table>
+<table class="is-full-width is-fixed-layout">
 <tbody><tr>
 <th>Class field decorators for directives and components</th>
 <th><p><code>import { Input, ... } from '@angular/core';</code>
@@ -277,7 +276,7 @@ so the <code>@Directive</code> configuration applies to components as well</p>
 </tr>
 </tbody></table>
 
-<table>
+<table class="is-full-width is-fixed-layout">
 <tbody><tr>
 <th>Directive and component change detection and lifecycle hooks</th>
 <th><p>(implemented as class methods)
@@ -323,7 +322,7 @@ so the <code>@Directive</code> configuration applies to components as well</p>
 </tr>
 </tbody></table>
 
-<table>
+<table class="is-full-width is-fixed-layout">
 <tbody><tr>
 <th>Dependency injection configuration</th>
 <th></th>
@@ -343,7 +342,7 @@ so the <code>@Directive</code> configuration applies to components as well</p>
 </tr>
 </tbody></table>
 
-<table>
+<table class="is-full-width is-fixed-layout">
 <tbody><tr>
 <th>Routing and navigation</th>
 <th><p><code>import { Routes, RouterModule, ... } from '@angular/router';</code>
@@ -388,5 +387,4 @@ so the <code>@Directive</code> configuration applies to components as well</p>
 </td>
 </tr>
 </tbody></table>
-
 </div>
\ No newline at end of file
diff --git a/aio/src/styles/2-modules/_table.scss b/aio/src/styles/2-modules/_table.scss
index cd49bce85c..bc88868cc3 100644
--- a/aio/src/styles/2-modules/_table.scss
+++ b/aio/src/styles/2-modules/_table.scss
@@ -8,6 +8,10 @@ table {
     width: 100%;
   }
 
+  &.is-fixed-layout {
+    table-layout: fixed;
+  }
+
   thead {
     vertical-align: middle;
     border-color: inherit;
@@ -83,4 +87,8 @@ table {
 
     }
   }
+}
+
+#cheatsheet table tbody td {
+  overflow: auto;
 }
\ No newline at end of file