Style tables by default

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>

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);