Data Table: modifiers with headers in body cells

What package(s) are you using?

• carbon-components
• carbon-components-react

Detailed description

Describe in detail the issue you’re having.

<th> cells in the table body aren’t getting the correct background color/border when using the zebra modifier. When using size modifiers (compact, tall, short), the cell spacing is also unaffected.

Is this issue related to a specific component?

Data Table with modifiers

What did you expect to happen? What happened instead? What would you like to see changed?

The th cells match the rest of the cells in the row

What browser are you working in?

Chrome

What version of the Carbon Design System are you using?

10.7.3

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

Watson Health Design Pattern & Asset Library (we have developer available to help with this contribution)

Steps to reproduce the issue

1. Have a <th> cell within the body of a table with the zebra or a size modifier

Please create a reduced test case in CodeSandbox

https://codesandbox.io/s/zebra-datatable-wtlyu

Additional information

Grey 90 screen shot

[elizabethsjudd]

@carbon-design-system/developers

@ChevonNwosu can work on the first item in the todo list if you want to assign it to him.

[tw15egan]

Agreeable To-Do list?

• th supported inside tbody with proper sizing
• Determine styles for th when placed inside tbody

I agree with Vince that they should receive the same styles as th inside thead, as that seems to be the w3 standard.