@@ -918,6 +918,13 @@ table {
 .table--hoverCell tbody td:hover {
   background-color: #f5f5f5; }
 
+.table--truncate {
+  table-layout: fixed; }
+  .table--truncate td {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap; }
+
 i,
 em,
 .italic {
 
@@ -156,3 +156,14 @@ table {
 .table--hoverCell {
   tbody td:hover { background-color: getColor(background, light); }
 }
+
+// Truncate table
+.table--truncate {
+  table-layout: fixed;
+
+  td {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
@@ -19,6 +19,11 @@
       text-align: center;
       width: 100%;
     }
+
+    .table--truncate,
+    .table--truncate td {
+      width: 500px;
+    }
   </style>
 </head>
 
@@ -345,6 +350,38 @@ <h6>Heading 6 <small>Helper text</small></h6>
     </tbody>
   </table>
 
+  <table class="table--truncate">
+    <thead>
+      <tr>
+        <th scope="col">#</th>
+        <th scope="col">First Name</th>
+        <th scope="col">Last Name</th>
+      </tr>
+    </thead>
+
+    <tfoot>
+      <tr>
+        <td><strong>Total Users:</strong></td>
+        <td>2</td>
+        <td></td>
+      </tr>
+    </tfoot>
+
+    <tbody>
+      <tr>
+        <td>1</td>
+        <td title="This is a long long long long long long long long text">This is a long long long long long long long long text</td>
+        <td>Doe</td>
+      </tr>
+
+      <tr>
+        <td>2</td>
+        <td>Jane</td>
+        <td>Doe</td>
+      </tr>
+    </tbody>
+  </table>
+
   <div class="table--responsive">
     <table class="table--full">
       <thead>