alternate line background

Author: ivosdc

dist/crud-table-config-html.js

@@ -10,7 +10,7 @@ let table_config = {
         {name: 'private', show: true, edit: false, size: '200px'},
         {name: 'html', show: true, edit: true, size: '500px', type: 'html'}
     ],
-    row_settings: {height: '2em'}
+    row_settings: {height: '1.3em'}
 }
 
 let genericCrudTable = document.querySelector('crud-table');

package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-generic-crud-table",
-  "version": "1.5.65",
+  "version": "1.5.66",
   "description": "<crud-table> renders object-arrays with options-panel and inline edit per row. Dispatches events for ongoing data handling. As self-containing webcomponent or for Svelte in 60KB",
   "main": "dist/build/crud-table.js",
   "module": "dist/build/crud-table.mjs",

src/SvelteGenericCrudTable.svelte

@@ -172,7 +172,7 @@
         {#if Array.isArray(table_data)}
             <div class="table">
                 <div class="thead"
-                     style="border-left: 0.1em solid #efefef;max-height:{(table_config.row_settings !== undefined) && (table_config.row_settings.height !== undefined) ? table_config.row_settings.height : table_config_default.row_settings.height};">
+                     style="max-height:{(table_config.row_settings !== undefined) && (table_config.row_settings.height !== undefined) ? table_config.row_settings.height : table_config_default.row_settings.height};">
                     <!-- /* istanbul ignore next line */ -->
                     {#each table_config.columns_setting as elem, index}
                         <!-- /* istanbul ignore next line */ -->
@@ -200,8 +200,8 @@
 
                 <!-- /* istanbul ignore next line */ -->
                 {#each table_data as tableRow, i (tableRow)}
-                    <div class="row"
-                         style="background-color:{i % 2 === 0 ? '#efefef' : '#ffffff'};min-height:{(table_config.row_settings !== undefined) && (table_config.row_settings.height !== undefined) ? table_config.row_settings.height : table_config_default.row_settings.height};">
+                    <div class="row {i % 2 === 0 ? 'dark' : ''}"
+                         style="min-height:{(table_config.row_settings !== undefined) && (table_config.row_settings.height !== undefined) ? table_config.row_settings.height : table_config_default.row_settings.height};">
                         {#each table_config.columns_setting as column_order, j}
                             {#each Object.entries(tableRow) as elem, k}
                                 <!-- /* istanbul ignore next */ -->
@@ -342,10 +342,14 @@
         resize: vertical;
     }
 
-    .row:hover {
+    .dark {
         background-color: #efefef;
     }
 
+    .row:hover {
+        background-color: rgba(0,0,0,0.1);
+    }
+
     .td {
         color: #5f5f5f;
         border: none;