Style tables with relaxed and condensed rows

* attempt with shadows, but they are between every row: http://jsfiddle.net/d872e3nb/
 * another attempt at applying styles to tbody groups http://jsfiddle.net/sb38cLdu/

app/views/admin/products_v3/_table.html.haml

@@ -22,7 +22,7 @@
       %th.align-left= t('admin.inherits_properties')
       %th.align-right= t('admin.available_on')
   - products.each do |product|
-    %tbody
+    %tbody.relaxed
       %tr
         %td.align-left.header
           .line-clamp-1= product.name
@@ -49,7 +49,7 @@
         %td.align-right
           .line-clamp-1= product.available_on&.strftime('%F')
       - product.variants.each do |variant|
-        %tr
+        %tr.condensed
           %td.align-left
             .line-clamp-1= variant.display_name
           %td.align-right

app/webpacker/css/admin/products_v3.scss

@@ -30,6 +30,36 @@
     td {
       background-color: $color-tbl-cell-bg;
     }
+
+    // "Relaxed" row groups, containing condensed rows.
+    //
+    // `display:table` enforces strict rules and won't allow border styles on tbody.
+    // So we emulate group styles on the cells themselves.
+    .relaxed {
+      th,
+      td {
+        padding: $padding-tbl-cell-relaxed;
+      }
+
+      td {
+        border-bottom: 2px solid $color-tbl-bg;
+      }
+
+      tr:first-child td {
+        border-top: 4px solid $color-tbl-bg;
+      }
+      tr:last-child td {
+        border-bottom: 1px solid $color-tbl-cell-shadow;
+      }
+    }
+
+    // "Condensed" rows
+    .condensed {
+      td,
+      th {
+        padding: $padding-tbl-cell-condensed;
+      }
+    }
   }
 
   #no-products {

app/webpacker/css/admin_v3/globals/variables.scss

@@ -6,7 +6,7 @@
 //--------------------------------------------------------------
 $base-font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
 
-// Colors
+// Styles
 //--------------------------------------------------------------
 
 // Body base colors
@@ -28,9 +28,12 @@ $color-error:                    $red !default;
 // Table styles
 $color-tbl-bg:                   $light-grey !default;
 $color-tbl-cell-bg:              $white !default;
+$color-tbl-cell-shadow:          rgb(0, 0, 0, 0.15) !default;
 $color-tbl-thead-txt:            $color-headers !default;
 $color-tbl-thead-bg:             $light-grey !default;
 $padding-tbl-cell:               12px 12px;
+$padding-tbl-cell-condensed:     10px 12px;
+$padding-tbl-cell-relaxed:       16px 12px;
 
 // Button colors
 $color-btn-bg:                   $teal !default;