diff --git a/components/table/Table.js b/components/table/Table.js
index f7eff3c9..1ea215ab 100644
--- a/components/table/Table.js
+++ b/components/table/Table.js
@@ -92,7 +92,7 @@ const factory = (TableHead, TableRow) => {
} = this.props;
return (
- {this.renderHead()}
+ {this.renderHead()}
{this.renderRows()}
);
diff --git a/components/table/TableCell.js b/components/table/TableCell.js
index 3785b774..9596bcf8 100644
--- a/components/table/TableCell.js
+++ b/components/table/TableCell.js
@@ -56,8 +56,6 @@ const factory = (FontIcon) => {
} = this.props;
const _className = classnames(theme.tableCell, {
- [theme.headCell]: tagName === 'th',
- [theme.rowCell]: tagName === 'td',
[theme.sorted]: sorted,
[theme.numeric]: numeric,
}, className);
diff --git a/components/table/TableRow.js b/components/table/TableRow.js
index 65ab1a36..4fe94a4e 100644
--- a/components/table/TableRow.js
+++ b/components/table/TableRow.js
@@ -29,7 +29,7 @@ const factory = (Checkbox, TableCell) => {
render() {
const { children, className, selectable, idx, selected, theme, ...other } = this.props; // eslint-disable-line
- const _className = classnames(theme.row, {
+ const _className = classnames({
[theme.selected]: selectable && selected,
}, className);
return (
diff --git a/components/table/theme.css b/components/table/theme.css
index d7dc5a8f..f7b11195 100644
--- a/components/table/theme.css
+++ b/components/table/theme.css
@@ -28,12 +28,12 @@
@apply --reset;
}
-.head {
+.table > head, .head {
padding-bottom: calc(0.3 * var(--unit));
white-space: nowrap;
}
-.row {
+.table > tbody > tr, .row {
color: var(--table-row-color);
height: var(--table-row-height);
transition-duration: 0.28s;
@@ -45,6 +45,10 @@
&.selected { background-color: var(--table-selection-color); }
}
+.table > thead > tr > th,
+.table > tbody > tr > th,
+.table > thead > tr > td,
+.table > tbody > tr > td,
.rowCell,
.headCell {
padding: 0 var(--table-column-padding) 12px var(--table-column-padding);
@@ -55,6 +59,8 @@
&.numeric { text-align: right; }
}
+.table > thead > tr > td,
+.table > tbody > tr > td,
.rowCell {
border-bottom: var(--table-dividers);
border-top: var(--table-dividers);
@@ -72,6 +78,8 @@
}
}
+.table > thead > tr > th,
+.table > tbody > tr > th,
.headCell {
color: var(--table-header-color);
font-size: var(--table-header-font-size);