When having a DataTable as expandable row companent, the CSS padding gets messed up

[nicoxxie]

What package(s) are you using?

• [x] carbon-components
• [x] carbon-components-react

Detailed description

Describe in detail the issue you're having.

We have a table inside another table as expandable row component.

Is this issue related to a specific component? DataTable

What did you expect to happen? What happened instead? What would you like to see changed? There is extra padding added for both the header and row

What browser are you working in? Chrome Version 79.0.3945.88 (Official Build) (64-bit)

What version of the Carbon Design System are you using? carbon-components-react: "7.9.0" carbon-components: "10.9.0"

What offering/product do you work on? Any pressing ship or release dates we should be aware of? IBM cloud

Steps to reproduce the issue

1. Step one
2. Step two
3. Step three
4. etc.

Please create a reduced test case in CodeSandbox

• Style and vanilla JS: https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/components/examples/codesandbox
• React: https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/react/examples/codesandbox

Additional information

• Screenshots or code
• Notes

[asudoh]

Hi 👋 thank you for entering! Please be advised that nested table is not a supported pattern and thus we don't have a intent to align those text positions in table cells.

[nicoxxie]

@asudoh I understand about not aligning the text, but problem is that the css adds padding to it's content. You see the inner row has extra padding on the bottom? Also in the header? we will have to manually override the CSS.

[asudoh]

Please let us know if you see a problem without nested table... Doing so may better explain what problem you hit. Anyhow, a fix can be done via CSS override, I see it'll be a viable solution for applications.

[asudoh]

Closing due to inactivity, but please let us know if there is a reduced case without nested table. Thanks!