[docs] Hide duplicate table borders (#20809)

mui · Jun 18, 2020 · 395c933 · 395c933
1 parent e9007e1
commit 395c933
Show file tree

Hide file tree

Showing 8 changed files with 38 additions and 4 deletions.
diff --git a/docs/src/pages/components/tables/CustomizedTables.js b/docs/src/pages/components/tables/CustomizedTables.js
@@ -23,6 +23,10 @@ const StyledTableRow = withStyles((theme) => ({
     '&:nth-of-type(odd)': {
       backgroundColor: theme.palette.action.hover,
     },
+    // hide last border
+    '&:last-child td, &:last-child th': {
+      border: 0,
+    },
   },
 }))(TableRow);
 

diff --git a/docs/src/pages/components/tables/CustomizedTables.tsx b/docs/src/pages/components/tables/CustomizedTables.tsx
@@ -26,6 +26,10 @@ const StyledTableRow = withStyles((theme: Theme) =>
       '&:nth-of-type(odd)': {
         backgroundColor: theme.palette.action.hover,
       },
+      // hide last border
+      '&:last-child td, &:last-child th': {
+        border: 0,
+      },
     },
   }),
 )(TableRow);

diff --git a/docs/src/pages/components/tables/DenseTable.js b/docs/src/pages/components/tables/DenseTable.js
@@ -12,6 +12,11 @@ const useStyles = makeStyles({
   table: {
     minWidth: 650,
   },
+  hideLastBorder: {
+    '&:last-child td, &:last-child th': {
+      border: 0,
+    },
+  },
 });
 
 function createData(name, calories, fat, carbs, protein) {
@@ -43,7 +48,7 @@ export default function DenseTable() {
         </TableHead>
         <TableBody>
           {rows.map((row) => (
-            <TableRow key={row.name}>
+            <TableRow key={row.name} className={classes.hideLastBorder}>
               <TableCell component="th" scope="row">
                 {row.name}
               </TableCell>

diff --git a/docs/src/pages/components/tables/DenseTable.tsx b/docs/src/pages/components/tables/DenseTable.tsx
@@ -12,6 +12,11 @@ const useStyles = makeStyles({
   table: {
     minWidth: 650,
   },
+  hideLastBorder: {
+    '&:last-child td, &:last-child th': {
+      border: 0,
+    },
+  },
 });
 
 function createData(name: string, calories: number, fat: number, carbs: number, protein: number) {
@@ -43,7 +48,7 @@ export default function DenseTable() {
         </TableHead>
         <TableBody>
           {rows.map((row) => (
-            <TableRow key={row.name}>
+            <TableRow key={row.name} className={classes.hideLastBorder}>
               <TableCell component="th" scope="row">
                 {row.name}
               </TableCell>

diff --git a/docs/src/pages/components/tables/SimpleTable.js b/docs/src/pages/components/tables/SimpleTable.js
@@ -12,6 +12,11 @@ const useStyles = makeStyles({
   table: {
     minWidth: 650,
   },
+  hideLastBorder: {
+    '&:last-child td, &:last-child th': {
+      border: 0,
+    },
+  },
 });
 
 function createData(name, calories, fat, carbs, protein) {
@@ -43,7 +48,7 @@ export default function SimpleTable() {
         </TableHead>
         <TableBody>
           {rows.map((row) => (
-            <TableRow key={row.name}>
+            <TableRow key={row.name} className={classes.hideLastBorder}>
               <TableCell component="th" scope="row">
                 {row.name}
               </TableCell>

diff --git a/docs/src/pages/components/tables/SimpleTable.tsx b/docs/src/pages/components/tables/SimpleTable.tsx
@@ -12,6 +12,11 @@ const useStyles = makeStyles({
   table: {
     minWidth: 650,
   },
+  hideLastBorder: {
+    '&:last-child td, &:last-child th': {
+      border: 0,
+    },
+  },
 });
 
 function createData(name: string, calories: number, fat: number, carbs: number, protein: number) {
@@ -43,7 +48,7 @@ export default function SimpleTable() {
         </TableHead>
         <TableBody>
           {rows.map((row) => (
-            <TableRow key={row.name}>
+            <TableRow key={row.name} className={classes.hideLastBorder}>
               <TableCell component="th" scope="row">
                 {row.name}
               </TableCell>

diff --git a/docs/src/pages/components/tables/SpanningTable.js b/docs/src/pages/components/tables/SpanningTable.js
@@ -14,6 +14,9 @@ const useStyles = makeStyles({
   table: {
     minWidth: 700,
   },
+  hideBorder: {
+    border: 0,
+  },
 });
 
 function ccyFormat(num) {

diff --git a/docs/src/pages/components/tables/SpanningTable.tsx b/docs/src/pages/components/tables/SpanningTable.tsx
@@ -14,6 +14,9 @@ const useStyles = makeStyles({
   table: {
     minWidth: 700,
   },
+  hideBorder: {
+    border: 0,
+  },
 });
 
 function ccyFormat(num: number) {