Using a mixin for hairlines so they can be more flexible.

dist/ratchet.css

@@ -401,7 +401,7 @@ strong {
 .table-view li {
   position: relative;
   padding: 11px 60px 12px 15px;
-  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='1'><rect fill='#e6e6e6' x='0' y='0' width='320' height='0.5'/></svg>");
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320px' height='1'><rect fill='#c8c7cc' x='0' y='0' width='320px' height='0.5'/></svg>");
   background-position: 15px 100%;
   background-repeat: no-repeat;
 }
@@ -428,7 +428,6 @@ strong {
   border: 1px solid rgba(0, 0, 0, 0.15);
   border-radius: 6px;
 }
-.table-view.inset li:first-child,
 .table-view.inset li:last-child {
   background-image: none;
 }
@@ -441,8 +440,9 @@ strong {
   color: #999;
   font-weight: 500;
   background-color: #fafafa;
-  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='1'><rect fill='#e6e6e6' x='0' y='0' width='320' height='0.5'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='1'><rect fill='#e6e6e6' x='0' y='0' width='320' height='0.5'/></svg>");
-  background-position: top, bottom;
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320px' height='1'><rect fill='#c8c7cc' x='0' y='0' width='320px' height='0.5'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320px' height='1'><rect fill='#c8c7cc' x='0' y='0' width='320px' height='0.5'/></svg>");
+  background-position: 0 100%, 0 0%;
+  background-repeat: no-repeat;
 }
 .table-view .table-view-divider:first-child {
   top: 0;

lib/sass/mixins.scss

@@ -66,4 +66,20 @@
 @mixin animation-direction($direction) {
   -webkit-animation-direction: $direction;
           animation-direction: $direction;
-}
+}
+
+
+// Misc
+// --------------------------------------------------
+@mixin hairline($color, $width, $offset, $type) {
+  @if $type == single {
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='#{$width}' height='1'><rect fill='#{$color}' x='0' y='0' width='#{$width}' height='0.5'/></svg>");
+    background-position: $offset 100%;
+
+  } @else if $type == double {
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='#{$width}' height='1'><rect fill='#{$color}' x='0' y='0' width='#{$width}' height='0.5'/></svg>"),
+                      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='#{$width}' height='1'><rect fill='#{$color}' x='0' y='0' width='#{$width}' height='0.5'/></svg>");
+    background-position: $offset 100%, $offset 0%;
+  }
+  background-repeat: no-repeat;
+}

lib/sass/table-views.scss

@@ -12,9 +12,7 @@
   li {
     position: relative;
     padding: 11px 60px 12px 15px; // Given extra right padding to accomodate badges, chevrons or buttons. Extra 1px bottom padding given for hairline divider.
-    background-image: $hairline;
-    background-position: 15px 100%;
-    background-repeat: no-repeat;
+    @include hairline(#c8c7cc, 320px, 15px, single);
 
 
     // Remove the border from the last table view item
@@ -51,8 +49,7 @@
     border: 1px solid rgba(0, 0, 0, .15);
     border-radius: 6px;
 
-    // Remove border from first/last standard list items to avoid double border at top/bottom of table views
-    li:first-child,
+    // Remove border from last standard list items to avoid double border at top/bottom of table views
     li:last-child {
       background-image: none;
     }
@@ -71,8 +68,7 @@
     color: #999;
     font-weight: $font-weight;
     background-color: #fafafa;
-    background-image: $hairline, $hairline;
-    background-position: top, bottom;
+    @include hairline(#c8c7cc, 320px, 0, double);
 
     // Rounding first divider on inset lists and remove border on the top
     &:first-child {