Tables nested inside other tables don't work correctly

What package(s) are you using?

• carbon-components
• carbon-components-react

Detailed description

Carbon supports tables with expandable rows, where the expandable row content can presumably be anything, including another table:

<table class=bx-data-table>
    ...
    <tr data-child-row=true>
        ...
        <table class=bx-data-table>
             ...
                <td>

But when there’s a table nested inside another table, you start to get unwanted cascading effects from the CSS.

For example, if you hover the data-child-row row in the parent table, then all the cells in the child table will get the hover effect, due to this CSS:

  .#{$prefix}--data-table tbody tr:hover td,
  .#{$prefix}--data-table tbody tr:hover th {
    color: $text-01;
    background: $hover-ui;
    border-top: 1px solid $hover-ui;
    border-bottom: 1px solid $hover-ui;
  }

Similarly, setting the parent table to have a tall height will affect the child table too, due to CSS like:

  .#{$prefix}--data-table--tall .#{$prefix}--table-column-checkbox {
    padding-top: rem(13px);
  }

Also, the column headers at the top of the child table turn out white rather than gray, due to this apparently vestigial CSS to support rowheaders (there’s a lot of CSS to support rowheaders that’s apparently unused):

  .#{$prefix}--data-table tbody th {
    ...
    background: $layer;
    ...
  }

These are just a few examples.

I guess you could solve this by using another prefix for the child table, but I don’t think that’s what prefixes are for. Seems better to solve it using the > selector.

[wkeese]

Thanks. I was just aiming to have the selectors fixed, although to be clear, there are many more problems than just hover. A more subtle example would be:

.#{$prefix}--data-table tbody th

That’s apparently intended for row headers (i.e. headers on the left-hand side rather than on the top), but it ends up affecting the <th> nodes inside the nested table’s <thead>.

As I side note, selectors like that should arguably be removed completely as they are unused, or at least unsupported. But if you keep them, they should be fixed to only match the top table.

[wkeese]

OK, fair enough, I created one https://codesandbox.io/s/affectionate-lake-v3trm?file=/src/index.js. It’s rough, but it shows the problem with all table rows getting the hover effect, in addition to the size=tall setting on the parent table bleeding into the child table.

PS: To repeat, these are just a few examples of the likely problems. Another example might be when the parent table is sortable (.#{$prefix}--data-table--sort) but the child table is not, where the child table will be inadvertently affected by this CSS:

.#{$prefix}--data-table--sort th {
	height: $layout-04;
	border-top: none;
	border-bottom: none;
}