diff --git a/docs-orange/_includes/boostwatch/tableSorter.html b/docs-orange/_includes/boostwatch/tableSorter.html
index b2d1bc586c..9e703ca257 100644
--- a/docs-orange/_includes/boostwatch/tableSorter.html
+++ b/docs-orange/_includes/boostwatch/tableSorter.html
@@ -1,10 +1,10 @@
 <h2 id="tables">Tables</h2>
-<h3 id="default-tables">Default tables</h3>
+<h3>Striped table</h3>
 
 <div class="container-fluid">
-    <div class="row">
+  <div class="row">
     <table class="table table-striped table-hover ">
-    <caption>Optional table caption.</caption>
+    <caption></caption>
         <thead>
         <tr>
             <th>#</th>
@@ -32,8 +32,6 @@ <h3 id="default-tables">Default tables</h3>
         <tr>
             <th scope="row">3</th>
             <td>
-                <span class="icon-tick text-success" aria-hidden="true"></span>
-                <span class="sr-only">success</span>
             </td>
             <td>Column content</td>
             <td>Column content</td>
@@ -49,42 +47,99 @@ <h3 id="default-tables">Default tables</h3>
         <tr>
             <th scope="row">5</th>
             <td>
-                <span class="icon-info text-info" aria-hidden="true"></span>
-                <span class="sr-only">information</span>
             </td>
             <td>Column content</td>
             <td>Column content</td>
             <td>Column content</td>
         </tr>
+        </tbody>
+    </table>
+  </div>
+</div>
+
+<h3>Checkbox table</h3>
+<div class="container-fluid">
+  <div class="row">
+    <table class="table table-hover has-checkbox">
+    <caption></caption>
+    <thead>
         <tr>
-            <th scope="row">6</th>
+            <th>
+                <label class="custom-control custom-checkbox">
+                    <input class="custom-control-input" type="checkbox">
+                    <span class="custom-control-indicator"></span>
+                    <span class="custom-control-description sr-only">select all</span>
+                </label>
+            </th>
+            <th>Status</th>
+            <th>Column heading</th>
+            <th>Column heading</th>
+            <th>Column heading</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <th scope="row">
+                <label class="custom-control custom-checkbox">
+                    <input class="custom-control-input" type="checkbox">
+                    <span class="custom-control-indicator"></span>
+                    <span class="custom-control-description sr-only">select row 1</span>
+                </label>
+            </th>
             <td></td>
             <td>Column content</td>
             <td>Column content</td>
             <td>Column content</td>
         </tr>
-        <tr>
-            <th scope="row">7</th>
+        <tr class="selected">
+            <th scope="row">
+                <label class="custom-control custom-checkbox">
+                    <input class="custom-control-input" type="checkbox" checked>
+                    <span class="custom-control-indicator"></span>
+                    <span class="custom-control-description sr-only">select row 2</span>
+                </label>
+            </th>
+            <td></td>
+            <td>Column content</td>
+            <td>Column content</td>
+            <td>Column content</td>
+        </tr>
+        <tr class="selected">
+            <th scope="row">
+                <label class="custom-control custom-checkbox">
+                    <input class="custom-control-input" type="checkbox" checked>
+                    <span class="custom-control-indicator"></span>
+                    <span class="custom-control-description sr-only">select row 3</span>
+                </label>
+            </th>
             <td>
-                <span class="glyphicon glyphicon-warning-sign text-warning" aria-hidden="true"></span>
-                <span class="sr-only">warning</span>
             </td>
             <td>Column content</td>
             <td>Column content</td>
             <td>Column content</td>
         </tr>
         <tr>
-            <th scope="row">8</th>
+            <th scope="row">
+                <label class="custom-control custom-checkbox">
+                    <input class="custom-control-input" type="checkbox">
+                    <span class="custom-control-indicator"></span>
+                    <span class="custom-control-description sr-only">select row 4</span>
+                </label>
+            </th>
             <td></td>
             <td>Column content</td>
             <td>Column content</td>
             <td>Column content</td>
         </tr>
         <tr>
-            <th scope="row">9</th>
+            <th scope="row">
+                <label class="custom-control custom-checkbox">
+                    <input class="custom-control-input" type="checkbox">
+                    <span class="custom-control-indicator"></span>
+                    <span class="custom-control-description sr-only">select row 5</span>
+                </label>
+            </th>
             <td>
-                <span class="glyphicon glyphicon-exclamation-sign text-danger" aria-hidden="true"></span>
-                <span class="sr-only">danger</span>
             </td>
             <td>Column content</td>
             <td>Column content</td>
@@ -92,11 +147,125 @@ <h3 id="default-tables">Default tables</h3>
         </tr>
         </tbody>
     </table>
-</div><!-- /example -->
+  </div>
+</div>
+
+<h3>Thumbnails & Icons table</h3>
+<div class="container-fluid">
+  <div class="row">
+    <table class="table table-hover has-checkbox has-icon">
+    <caption></caption>
+    <thead>
+        <tr>
+            <th>
+                <label class="custom-control custom-checkbox">
+                    <input class="custom-control-input" type="checkbox">
+                    <span class="custom-control-indicator"></span>
+                    <span class="custom-control-description sr-only">select all</span>
+                </label>
+            </th>
+            <th>Name</th>
+            <th>Column heading</th>
+            <th>Column heading</th>
+            <th>Column heading</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <th scope="row">
+                <label class="custom-control custom-checkbox">
+                    <input class="custom-control-input" type="checkbox">
+                    <span class="custom-control-indicator"></span>
+                    <span class="custom-control-description sr-only">select row 1</span>
+                </label>
+            </th>
+            <td>
+                <span class="icon-folder-document"></span>
+                <span class="sr-only">folder</span>
+                <span>Finance</span>
+            </td>
+            <td>Column content</td>
+            <td>Column content</td>
+            <td>Column content</td>
+        </tr>
+        <tr>
+            <th scope="row">
+                <label class="custom-control custom-checkbox">
+                    <input class="custom-control-input" type="checkbox">
+                    <span class="custom-control-indicator"></span>
+                    <span class="custom-control-description sr-only">select row 2</span>
+                </label>
+            </th>
+            <td>
+                <span class="icon-unknown-file"></span>
+                <span class="sr-only">file</span>
+                <span>File</span>
+            </td>
+            <td>Column content</td>
+            <td>Column content</td>
+            <td>Column content</td>
+        </tr>
+        <tr class="selected">
+            <th scope="row">
+                <label class="custom-control custom-checkbox">
+                    <input class="custom-control-input" type="checkbox" checked>
+                    <span class="custom-control-indicator"></span>
+                    <span class="custom-control-description sr-only">select row 3</span>
+                </label>
+            </th>
+            <td>
+                <img src="../../assets/img/thumb_yellow.png" alt="thumb_yellow.png"><span>Img 1</span>
+            </td>
+            <td>Column content</td>
+            <td>Column content</td>
+            <td>Column content</td>
+        </tr>
+        <tr>
+            <th scope="row">
+                <label class="custom-control custom-checkbox">
+                    <input class="custom-control-input" type="checkbox">
+                    <span class="custom-control-indicator"></span>
+                    <span class="custom-control-description sr-only">select row 4</span>
+                </label>
+            </th>
+            <td>
+                <img src="../../assets/img/thumb_blue.png" alt="thumb_blue.png"><span>Img 2</span>
+            </td>
+            <td>Column content</td>
+            <td>Column content</td>
+            <td>Column content</td>
+        </tr>
+        <tr>
+            <th scope="row">
+                <label class="custom-control custom-checkbox">
+                    <input class="custom-control-input" type="checkbox">
+                    <span class="custom-control-indicator"></span>
+                    <span class="custom-control-description sr-only">select row 5</span>
+                </label>
+            </th>
+            <td>
+                <span class="icon-info" style="color: #527EDB;"></span>
+                <span class="sr-only">info</span>
+            </td>
+            <td>
+                <span class="icon-tick" style="color: #32C832;"></span>
+                <span class="sr-only">checked</span>
+            </td>
+            <td>
+                <span class="icon-tick" style="color: #32C832;"></span>
+                <span class="sr-only">checked</span>
+            </td>
+            <td>
+                <span class="icon-tick" style="color: #32C832;"></span>
+                <span class="sr-only">checked</span>
+            </td>
+        </tr>
+        </tbody>
+    </table>
+  </div>
 </div>
 
-<h3 id="complextable">Complex table</h3>
-<p class="lead">Table with sortable columns.</p>
+<h3 id="complextable">Sortable table</h3>
 <div class="container-fluid">
     <div class="row">
         <table id="myTable" class="table tablesorter">
diff --git a/docs-orange/_includes/nav-boostwatch.html b/docs-orange/_includes/nav-boostwatch.html
index 597c082136..e0da66de47 100644
--- a/docs-orange/_includes/nav-boostwatch.html
+++ b/docs-orange/_includes/nav-boostwatch.html
@@ -7,7 +7,7 @@
           <a class="bd-toc-link" href="#modal">Modal window</a>
       </div>
       <div class="bd-toc-item ">
-          <a class="bd-toc-link" href="#tables">Complex tables</a>
+          <a class="bd-toc-link" href="#tables">Tables</a>
       </div>
       <div class="bd-toc-item ">
           <a class="bd-toc-link" href="#bulletpoint">Bullet point</a>
diff --git a/docs-orange/assets/img/thumb_blue.png b/docs-orange/assets/img/thumb_blue.png
new file mode 100644
index 0000000000..9f83517b96
Binary files /dev/null and b/docs-orange/assets/img/thumb_blue.png differ
diff --git a/docs-orange/assets/img/thumb_yellow.png b/docs-orange/assets/img/thumb_yellow.png
new file mode 100644
index 0000000000..344f8cb7ec
Binary files /dev/null and b/docs-orange/assets/img/thumb_yellow.png differ
diff --git a/docs-orange/components/orange-tables.md b/docs-orange/components/orange-tables.md
index 42888e6f0d..55c30e71a4 100644
--- a/docs-orange/components/orange-tables.md
+++ b/docs-orange/components/orange-tables.md
@@ -4,7 +4,210 @@ title: Orange tables
 group: components
 ---
 
-### Title
+### Checkbox tables
+
+Add `.has-checkbox` class to the `<table>` element to get correct spacing on the first column.
+
+{% example html %}
+<table class="table table-hover has-checkbox">
+    <thead>
+        <tr>
+            <th>
+                <label class="custom-control custom-checkbox">
+                    <input class="custom-control-input" type="checkbox">
+                    <span class="custom-control-indicator"></span>
+                    <span class="custom-control-description sr-only">select all</span>
+                </label>
+            </th>
+            <th>Status</th>
+            <th>Column heading</th>
+            <th>Column heading</th>
+            <th>Column heading</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <th scope="row">
+                <label class="custom-control custom-checkbox">
+                    <input class="custom-control-input" type="checkbox">
+                    <span class="custom-control-indicator"></span>
+                    <span class="custom-control-description sr-only">select row 1</span>
+                </label>
+            </th>
+            <td></td>
+            <td>Column content</td>
+            <td>Column content</td>
+            <td>Column content</td>
+        </tr>
+        <tr class="selected">
+            <th scope="row">
+                <label class="custom-control custom-checkbox">
+                    <input class="custom-control-input" type="checkbox" checked>
+                    <span class="custom-control-indicator"></span>
+                    <span class="custom-control-description sr-only">select row 2</span>
+                </label>
+            </th>
+            <td></td>
+            <td>Column content</td>
+            <td>Column content</td>
+            <td>Column content</td>
+        </tr>
+        <tr class="selected">
+            <th scope="row">
+                <label class="custom-control custom-checkbox">
+                    <input class="custom-control-input" type="checkbox" checked>
+                    <span class="custom-control-indicator"></span>
+                    <span class="custom-control-description sr-only">select row 3</span>
+                </label>
+            </th>
+            <td>
+            </td>
+            <td>Column content</td>
+            <td>Column content</td>
+            <td>Column content</td>
+        </tr>
+        <tr>
+            <th scope="row">
+                <label class="custom-control custom-checkbox">
+                    <input class="custom-control-input" type="checkbox">
+                    <span class="custom-control-indicator"></span>
+                    <span class="custom-control-description sr-only">select row 4</span>
+                </label>
+            </th>
+            <td></td>
+            <td>Column content</td>
+            <td>Column content</td>
+            <td>Column content</td>
+        </tr>
+        <tr>
+            <th scope="row">
+                <label class="custom-control custom-checkbox">
+                    <input class="custom-control-input" type="checkbox">
+                    <span class="custom-control-indicator"></span>
+                    <span class="custom-control-description sr-only">select row 5</span>
+                </label>
+            </th>
+            <td>
+            </td>
+            <td>Column content</td>
+            <td>Column content</td>
+            <td>Column content</td>
+        </tr>
+        </tbody>
+    </table>
+{% endexample %}
+
+### Thumbnail and icons tables
+
+In addition use `.has-icon` to specify the table is using icons and thumbnails to get correct row height.
 
 {% example html %}
-{% endexample %}
\ No newline at end of file
+<table class="table table-hover has-checkbox has-icon">
+    <thead>
+        <tr>
+            <th>
+                <label class="custom-control custom-checkbox">
+                    <input class="custom-control-input" type="checkbox">
+                    <span class="custom-control-indicator"></span>
+                    <span class="custom-control-description sr-only">select all</span>
+                </label>
+            </th>
+            <th>Name</th>
+            <th>Column heading</th>
+            <th>Column heading</th>
+            <th>Column heading</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <th scope="row">
+                <label class="custom-control custom-checkbox">
+                    <input class="custom-control-input" type="checkbox">
+                    <span class="custom-control-indicator"></span>
+                    <span class="custom-control-description sr-only">select row 1</span>
+                </label>
+            </th>
+            <td>
+                <span class="icon-folder-document"></span>
+                <span class="sr-only">folder</span>
+                <span>Finance</span>
+            </td>
+            <td>Column content</td>
+            <td>Column content</td>
+            <td>Column content</td>
+        </tr>
+        <tr>
+            <th scope="row">
+                <label class="custom-control custom-checkbox">
+                    <input class="custom-control-input" type="checkbox">
+                    <span class="custom-control-indicator"></span>
+                    <span class="custom-control-description sr-only">select row 2</span>
+                </label>
+            </th>
+            <td>
+                <span class="icon-unknown-file"></span>
+                <span class="sr-only">file</span>
+                <span>File</span>
+            </td>
+            <td>Column content</td>
+            <td>Column content</td>
+            <td>Column content</td>
+        </tr>
+        <tr class="selected">
+            <th scope="row">
+                <label class="custom-control custom-checkbox">
+                    <input class="custom-control-input" type="checkbox" checked>
+                    <span class="custom-control-indicator"></span>
+                    <span class="custom-control-description sr-only">select row 3</span>
+                </label>
+            </th>
+            <td>
+                <img src="../../assets/img/thumb_yellow.png" alt="thumb_yellow.png"><span>Img 1</span>
+            </td>
+            <td>Column content</td>
+            <td>Column content</td>
+            <td>Column content</td>
+        </tr>
+        <tr>
+            <th scope="row">
+                <label class="custom-control custom-checkbox">
+                    <input class="custom-control-input" type="checkbox">
+                    <span class="custom-control-indicator"></span>
+                    <span class="custom-control-description sr-only">select row 4</span>
+                </label>
+            </th>
+            <td>
+                <img src="../../assets/img/thumb_blue.png" alt="thumb_blue.png"><span>Img 2</span>
+            </td>
+            <td>Column content</td>
+            <td>Column content</td>
+            <td>Column content</td>
+        </tr>
+        <tr>
+            <th scope="row">
+                <label class="custom-control custom-checkbox">
+                    <input class="custom-control-input" type="checkbox">
+                    <span class="custom-control-indicator"></span>
+                    <span class="custom-control-description sr-only">select row 5</span>
+                </label>
+            </th>
+            <td>
+                <span class="icon-info" style="color: #527EDB;"></span>
+                <span class="sr-only">info</span>
+            </td>
+            <td>
+                <span class="icon-tick" style="color: #32C832;"></span>
+                <span class="sr-only">checked</span>
+            </td>
+            <td>
+                <span class="icon-tick" style="color: #32C832;"></span>
+                <span class="sr-only">checked</span>
+            </td>
+            <td>
+                <span class="icon-tick" style="color: #32C832;"></span>
+                <span class="sr-only">checked</span>
+            </td>
+        </tr>
+        </tbody>
+    </table>
+{% endexample %}
diff --git a/docs/_data/nav.yml b/docs/_data/nav.yml
index 39f3b97c84..6d230fdfb9 100644
--- a/docs/_data/nav.yml
+++ b/docs/_data/nav.yml
@@ -61,6 +61,7 @@
     - title: Progress
     # boosted mod
     - title: Orange list
+    - title: Orange tables
     # end mod
     - title: Scrollspy
     # boosted mod
diff --git a/scss/_orange-css.scss b/scss/_orange-css.scss
index 119535e713..5ea33545bc 100644
--- a/scss/_orange-css.scss
+++ b/scss/_orange-css.scss
@@ -202,22 +202,83 @@ a:focus {
   > tbody,
   > tfoot {
     > tr {
+      border-bottom: 1px solid $table-border-color;
+
       > th,
       > td {
-        // Remove border top and put border-botom
+        padding: .625rem .625rem .625rem 0;
         font-size: $font-size-sm;
-        border-top: 0;
-        border-bottom: 1px solid $table-border-color;
+        border: 0;
+      }
+
+      > th:first-child,
+      > td:first-child {
+        padding-left: .625rem;
       }
+
+      > th {
+        font-size: $font-size-base;
+      }
+
       [class^="icon-"],
       [class*=" icon-"] {
-        font-size: ($font-size-sm * $line-height-base);
+        font-size: 1.8125rem;
+      }
+    }
+  }
+
+  thead tr {
+    border-bottom-width: 2px;
+  }
+
+  &.has-checkbox {
+    tr.selected {
+      > td,
+      > th {
+        background-color: $gray-lighter-o;
+      }
+    }
+
+    tr > th:first-child,
+    tr > td:first-child {
+      width: 1.25rem;
+
+      .custom-control.custom-checkbox {
+        padding-left: 1.25rem;
       }
     }
   }
 
-  > thead th {
-    border-bottom: 2px;
+  &.has-icon {
+    tr > td,
+    tr > th {
+      height: 3.125rem;
+      // padding-top: .9375rem;
+      // padding-bottom: .9375rem;
+      vertical-align: middle;
+
+      span,
+      img {
+        vertical-align: middle;
+      }
+
+      span {
+        margin-right: .375rem;
+      }
+
+      img {
+        width: 1.875rem;
+        height: 1.875rem;
+        margin-right: .625rem;
+      }
+
+      [class^="icon-"] {
+        width: 1.875rem;
+        font-size: 1.8125rem;
+        line-height: 0;
+        vertical-align: middle;
+      }
+    }
   }
 }