[Table] default display style for all table components

src/Table/Table.js

@@ -5,6 +5,7 @@ import withStyles from '../styles/withStyles';
 
 export const styles = theme => ({
   root: {
+    display: 'table',
     fontFamily: theme.typography.fontFamily,
     width: '100%',
     borderCollapse: 'collapse',

src/Table/TableBody.js

@@ -1,5 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import withStyles from '../styles/withStyles';
+
+const styles = {
+  root: {
+    display: 'table-row-group',
+  },
+};
 
 class TableBody extends React.Component {
   getChildContext() {
@@ -12,9 +20,9 @@ class TableBody extends React.Component {
   }
 
   render() {
-    const { component: Component, ...other } = this.props;
+    const { classes, className: classNameProp, component: Component, ...other } = this.props;
 
-    return <Component {...other} />;
+    return <Component className={classNames(classes.root, classNameProp)} {...other} />;
   }
 }
 
@@ -23,6 +31,14 @@ TableBody.propTypes = {
    * The content of the component, normally `TableRow`.
    */
   children: PropTypes.node.isRequired,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
   /**
    * The component used for the root node.
    * Either a string to use a DOM element or a component.
@@ -38,4 +54,4 @@ TableBody.childContextTypes = {
   table: PropTypes.object,
 };
 
-export default TableBody;
+export default withStyles(styles, { name: 'MuiTableBody' })(TableBody);

src/Table/TableBody.spec.js

@@ -9,7 +9,7 @@ describe('<TableBody />', () => {
   let shallow;
 
   before(() => {
-    shallow = createShallow();
+    shallow = createShallow({ dive: true });
   });
 
   it('should render a tbody', () => {

src/Table/TableCell.js

@@ -7,6 +7,7 @@ import { darken, fade, lighten } from '../styles/colorManipulator';
 
 export const styles = theme => ({
   root: {
+    display: 'table-cell',
     // Workaround for a rendering bug with spanned columns in Chrome 62.0.
     // Removes the alpha (sets it to 1), and lightens or darkens the theme color.
     borderBottom: `1px solid

src/Table/TableHead.js

@@ -1,5 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import withStyles from '../styles/withStyles';
+
+const styles = {
+  root: {
+    display: 'table-header-group',
+  },
+};
 
 class TableHead extends React.Component {
   getChildContext() {
@@ -12,9 +20,9 @@ class TableHead extends React.Component {
   }
 
   render() {
-    const { component: Component, ...other } = this.props;
+    const { classes, className: classNameProp, component: Component, ...other } = this.props;
 
-    return <Component {...other} />;
+    return <Component className={classNames(classes.root, classNameProp)} {...other} />;
   }
 }
 
@@ -23,6 +31,14 @@ TableHead.propTypes = {
    * The content of the component, normally `TableRow`.
    */
   children: PropTypes.node.isRequired,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
   /**
    * The component used for the root node.
    * Either a string to use a DOM element or a component.
@@ -38,4 +54,4 @@ TableHead.childContextTypes = {
   table: PropTypes.object,
 };
 
-export default TableHead;
+export default withStyles(styles, { name: 'MuiTableHead' })(TableHead);

src/Table/TableHead.spec.js

@@ -7,7 +7,7 @@ describe('<TableHead />', () => {
   let shallow;
 
   before(() => {
-    shallow = createShallow();
+    shallow = createShallow({ dive: true });
   });
 
   it('should render a thead', () => {