From 9e5a18b28949855ef16050efedf8dfe5acc0d40c Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Thu, 27 Jul 2017 13:53:15 -0400
Subject: [PATCH] Style tables by default

---
 index.html            | 17 ++++++++---------
 source/css/tables.css | 16 ++++++++--------
 2 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/index.html b/index.html
index 589be299..b6014316 100644
--- a/index.html
+++ b/index.html
@@ -950,7 +950,7 @@ PRINT "SHOELACE IS AWESOME"
     </p>
     <p>
       Note the class names used for the main container, the tab navs, and the tab panes. Also note
-      that each tabs links to its respective tab pane’s <code>id</code>.
+      that each tab links to its respective tab pane’s <code>id</code>.
     </p>
     <p>
       To disable a tab, add <code>disabled</code> to the appropriate tab nav.
@@ -1094,11 +1094,10 @@ PRINT "SHOELACE IS AWESOME"
     </h2>
 
     <p>
-      By default, tables are plain and unstyled. To create a styled table, apply the
-      <code>table</code> class to a table element.
+      Tables are styled for you automatically.
     </p>
 <pre>
-&lt;table class=&quot;table&quot;&gt;
+&lt;table&gt;
   &lt;thead&gt;
     &lt;tr&gt;&lt;th&gt;Item&lt;/th&gt;&lt;th&gt;Price&lt;/th&gt;&lt;/tr&gt;
   &lt;/thead&gt;
@@ -1110,7 +1109,7 @@ PRINT "SHOELACE IS AWESOME"
   &lt;/tbody&gt;
 &lt;/table&gt;
 </pre>
-    <table class="table">
+    <table>
       <thead>
         <tr><th>Item</th><th>Price</th></tr>
       </thead>
@@ -1127,11 +1126,11 @@ PRINT "SHOELACE IS AWESOME"
       Use the <code>table-striped</code> modifier to add stripes to alternating rows.
     </p>
 <pre>
-&lt;table class=&quot;table table-striped&quot;&gt;
+&lt;table class=&quot;table-striped&quot;&gt;
   ...
 &lt;/table&gt;
 </pre>
-    <table class="table table-striped">
+    <table class="table-striped">
       <thead>
         <tr><th>Item</th><th>Price</th></tr>
       </thead>
@@ -1148,11 +1147,11 @@ PRINT "SHOELACE IS AWESOME"
       Use the <code>table-bordered</code> modifier to add a border to the table.
     </p>
 <pre>
-&lt;table class=&quot;table table-bordered&quot;&gt;
+&lt;table class=&quot;table-bordered&quot;&gt;
   ...
 &lt;/table&gt;
 </pre>
-    <table class="table table-bordered">
+    <table class="table-bordered">
       <thead>
         <tr><th>Item</th><th>Price</th></tr>
       </thead>
diff --git a/source/css/tables.css b/source/css/tables.css
index a829c907..4e3472fd 100644
--- a/source/css/tables.css
+++ b/source/css/tables.css
@@ -1,12 +1,12 @@
 /*! Tables */
 
-.table {
+table {
   width: 100%;
   border-collapse: collapse;
   margin-bottom: 1rem;
 }
 
-.table caption {
+table caption {
   caption-side: bottom;
   font-size: var(--font-size-small);
   color: var(--text-muted);
@@ -14,28 +14,28 @@
   padding-top: var(--table-spacing-y);
 }
 
-.table th {
+table th {
   text-align: left;
   background: var(--table-header-bg-color);
   border-bottom: solid calc(var(--table-border-width) * 2) var(--table-border-color);
   padding: var(--table-spacing-y) var(--table-spacing-x);
 }
 
-.table td {
+table td {
   border-bottom: solid var(--table-border-width) var(--table-border-color);
   padding: var(--table-spacing-y) var(--table-spacing-x);
 }
 
-.table.table-striped tr:nth-child(odd) td {
+table.table-striped tr:nth-child(odd) td {
   background-color: var(--table-stripe-bg-color);
 }
 
-.table.table-bordered {
+table.table-bordered {
   border: solid var(--table-border-width) var(--table-border-color);
 }
 
-.table.table-bordered th,
-.table.table-bordered td {
+table.table-bordered th,
+table.table-bordered td {
   border-style: solid;
   border-width: var(--table-border-width);
   border-color: var(--table-border-color);