[Table] Wrong Table border radius when apply background color

[katopz]

Problem : When apply background color to Table header, it somehow lost border radius curve.

https://material-ui.com/components/tables/#fixed-header

I think we need to

• add border-top-left-radius: 4px; and border-top-right-radius: 4px; to thead
• add border-radius: inherit; to tr and th

So we got border curve as expect.

[mnajdova]

@katopz can you please provide a minimal reproduction test case with v5. A live example would be perfect. This codesandbox.io template may be a good starting point. Thank you!

This example may help you with customization the component - https://material-ui.com/components/tables/#customized-tables

[katopz]

minimal reproduction is already there with source code + live example 👉 https://material-ui.com/components/tables/#fixed-header

I can see customized-tables has rounded border or maybe it's intend to not rounded border for fixed-header and I've to customize it to be round?

[oliviertassinari]

@katopz We could update potentially do:

diff --git a/docs/src/pages/components/tables/StickyHeadTable.tsx b/docs/src/pages/components/tables/StickyHeadTable.tsx
index 87c22f2791..fbbe3dbe0e 100644
--- a/docs/src/pages/components/tables/StickyHeadTable.tsx
+++ b/docs/src/pages/components/tables/StickyHeadTable.tsx
@@ -82,6 +82,7 @@ const rows = [
 const useStyles = makeStyles({
   root: {
     width: '100%',
+    overflow: 'hidden',
   },
   container: {
     maxHeight: 440,

to respect the <Paper> border radius.

[atnpcg]

@oliviertassinari , thanks for the solution, I'll be creating a PR later this day to update the docs, unless someone else is working on it already