Material-ui: [TableCell] Different border color when use colSpan

[MaximKudriavtsev]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

All rows should have the same border color

Current Behavior

When I use colSpan for combine many columns borders have different colors

Steps to Reproduce (for bugs)

You may see this on example

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | 1.0.0-beta.21 |
| React | 16.1.1 |
| browser | Chrome 62.0.3202.94 |
| os | Windows 10 |

[oliviertassinari]

It looks fine in the latest versions of Firefox and Safari.

[mbrookes]

@oliviertassinari ...but not in Chrome:

[mbrookes]

This appears to be a Chrome rendering bug. The styling used for a spanned cell is the same as for a standard cell.

[oliviertassinari]

The best fix I can think of is using a rgb color instead of a rgba one.
@mbrookes Is this something we have in the colorManipulator toolbelt?

[mbrookes]

@oliviertassinari If the intention is to emulate how an rgba border shades the background color, by making the border color some computed rgb value based on the foreground and background colors, then no. Table doesn't have background color - it's provided by the parent element(s).

We'd have to do something hacky like traverse the parent nodes looking for background with getComputedStyle. Even then it wouldn't help if the background was a gradient or image.

If you're simply saying use a flat rgb color instead of it rgba, then sure, convertColorToString() will drop the alpha, and emphasize() could be used to darken or lighten the color, but that's only going to look good on the default dark and light backgrounds. Over a some other shade, color, gradient or image background you lose the facility that the border shades the background rather than covering it.

[oliviertassinari]

@mbrookes Ok, this is good to know.
I think that the simplest path forward is not to fix the issue. The best workaround I can think of is the following:

const theme = createTheme({
  overrides: {
    MuiTableCell: {
      root: {
        borderBottom: '1px solid #ececec',
      },
    },
  },
})

We have to choose between having an opacity and supporting correctly colSpan.

[oliviertassinari]

Hum, Bootstrap went with the no-opacity solution. I'm happy with this one too.

borderBottom: theme.type === 'light' ? `1px solid #ececec` : `1px solid #505050`,

https://github.com/callemall/material-ui/blob/d980b9c3722be203c873bb4d29c6c97a74c6c11a/src/Table/TableCell.js#L52