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"
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 id.
+ that each tab links to its respective tab pane’s id.
To disable a tab, add disabled to the appropriate tab nav.
@@ -1094,11 +1094,10 @@ PRINT "SHOELACE IS AWESOME"
- By default, tables are plain and unstyled. To create a styled table, apply the
- table class to a table element.
+ Tables are styled for you automatically.
-<table class="table">
+<table>
<thead>
<tr><th>Item</th><th>Price</th></tr>
</thead>
@@ -1110,7 +1109,7 @@ PRINT "SHOELACE IS AWESOME"
</tbody>
</table>
-
+
| Item | Price |
@@ -1127,11 +1126,11 @@ PRINT "SHOELACE IS AWESOME"
Use the table-striped modifier to add stripes to alternating rows.
-<table class="table table-striped">
+<table class="table-striped">
...
</table>
-
+
| Item | Price |
@@ -1148,11 +1147,11 @@ PRINT "SHOELACE IS AWESOME"
Use the table-bordered modifier to add a border to the table.
-<table class="table table-bordered">
+<table class="table-bordered">
...
</table>
-
+
| Item | Price |
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);