Nested Datatable with expanded

[Marcel2508]

Hey, I've discovered some ugly behaviour for nested DataTables with expanded colums:

I would propose 2 things:

1. Scope the nested css rules for td to only the parent table
2. Add an option to disable the hover color change (for expanded content)

What do you think about it?

Example Code:

<DataTable
    expandable
    headers={[
        { value: "foo", key: "foo" },
        { value: "bar", key: "bar" },
    ]}
    rows={[
        { id: 1, foo: "abc", bar: "cba" },
        { id: 2, foo: "xyz", bar: "zyx" },
    ]}
>
    <svelte:fragment slot="expanded-row" let:row>
        <DataTable
            headers={[
                { value: "foo", key: "foo" },
                { value: "bar", key: "bar" },
            ]}
            rows={[
                { id: 1, foo: "abc", bar: "cba" },
                { id: 2, foo: "xyz", bar: "zyx" },
            ]}
        />
    </svelte:fragment>
</DataTable>