fix(data-table): expandable rows should work with zebra styles (#1200)

Fixes #1199

docs/src/pages/components/DataTable.svx

@@ -1139,6 +1139,10 @@ Use `nonExpandableRowIds` to specify the ids for rows that should not be expanda
 
 <FileSource src="/framed/DataTable/DataTableNonExpandableRows" />
 
+### Expandable (zebra styles)
+
+<FileSource src="/framed/DataTable/DataTableExpandableZebra" />
+
 ### Expandable (compact size)
 
 <DataTable size="compact" expandable

docs/src/pages/framed/DataTable/DataTableExpandableZebra.svelte

@@ -0,0 +1,65 @@
+<script>
+  import { DataTable } from "carbon-components-svelte";
+</script>
+
+<DataTable
+  zebra
+  expandable
+  nonExpandableRowIds="{['a', 'd']}"
+  headers="{[
+    { key: 'name', value: 'Name' },
+    { key: 'protocol', value: 'Protocol' },
+    { key: 'port', value: 'Port' },
+    { key: 'rule', value: 'Rule' },
+  ]}"
+  rows="{[
+    {
+      id: 'a',
+      name: 'Load Balancer 3',
+      protocol: 'HTTP',
+      port: 3000,
+      rule: 'Round robin',
+    },
+    {
+      id: 'b',
+      name: 'Load Balancer 1',
+      protocol: 'HTTP',
+      port: 443,
+      rule: 'Round robin',
+    },
+    {
+      id: 'c',
+      name: 'Load Balancer 2',
+      protocol: 'HTTP',
+      port: 80,
+      rule: 'DNS delegation',
+    },
+    {
+      id: 'd',
+      name: 'Load Balancer 6',
+      protocol: 'HTTP',
+      port: 3000,
+      rule: 'Round robin',
+    },
+    {
+      id: 'e',
+      name: 'Load Balancer 4',
+      protocol: 'HTTP',
+      port: 443,
+      rule: 'Round robin',
+    },
+    {
+      id: 'f',
+      name: 'Load Balancer 5',
+      protocol: 'HTTP',
+      port: 80,
+      rule: 'DNS delegation',
+    },
+  ]}"
+>
+  <svelte:fragment slot="expanded-row" let:row>
+    <pre>
+      {JSON.stringify(row, null, 2)}
+    </pre>
+  </svelte:fragment>
+</DataTable>