diff --git a/server/documents/collections/table.html.eco b/server/documents/collections/table.html.eco
index 6520a7fb8..c40dcf50d 100755
--- a/server/documents/collections/table.html.eco
+++ b/server/documents/collections/table.html.eco
@@ -5,7 +5,14 @@ css : 'table'
title : 'Table'
description : 'Tables display collections of data grouped into rows'
type : 'UI Collection'
+
+element : 'table'
+elementType : 'collection'
+
+themes : ['Default']
---
+
+
<%- @partial('header') %>
diff --git a/src/definitions/collections/table.less b/src/definitions/collections/table.less
index eceb0fcd0..1217b34dc 100755
--- a/src/definitions/collections/table.less
+++ b/src/definitions/collections/table.less
@@ -46,10 +46,12 @@
}
/* Headers */
+.ui.table thead {
+ box-shadow: @headerBoxShadow;
+}
.ui.table thead th {
- border-bottom: @headerBorder;
cursor: auto;
- background-color: @headerBackground;
+ background: @headerBackground;
text-align: @headerAlign;
color: @headerColor;
padding: @headerVerticalPadding @headerHorizontalPadding;
@@ -57,19 +59,25 @@
font-style: @headerFontStyle;
font-weight: @headerFontWeight;
text-transform: @headerTextTransform;
+ border-bottom: @headerBorder;
+ border-left: @headerDivider;
}
.ui.table thead th:first-child {
border-radius: @borderRadius 0em 0em 0em;
+ border-left: none;
}
.ui.table thead th:last-child {
border-radius: 0em @borderRadius 0em 0em;
}
/* Footer */
+.ui.table tfoot {
+ box-shadow: @footerBoxShadow;
+}
.ui.table tfoot th {
cursor: auto;
border-top: @footerBorder;
- background-color: @footerBackground;
+ background: @footerBackground;
text-align: @footerAlign;
color: @footerColor;
padding: @footerVerticalPadding @footerHorizontalPadding;
@@ -602,6 +610,7 @@
}
.ui.inverted.table th {
background-color: @invertedHeaderBackground;
+ border-color: @invertedCellBorderColor;
color: @invertedHeaderColor;
}
.ui.inverted.table tr td {
diff --git a/src/themes/packages/default/collections/table.variables b/src/themes/packages/default/collections/table.variables
index 19844515b..e6567c598 100644
--- a/src/themes/packages/default/collections/table.variables
+++ b/src/themes/packages/default/collections/table.variables
@@ -30,8 +30,9 @@
@cellBorder: 1px solid @solidBorderColor;
/* Table Header */
-@headerBorder: 1px solid rgba(0, 0, 0, 0.1);
-@headerBackground: transparent;
+@headerBorder: 1px solid @solidBorderColor;
+@headerDivider: 1px solid @solidBorderColor;
+@headerBackground: linear-gradient(transparent, rgba(0, 0, 0, 0.03));
@headerAlign: left;
@headerVerticalAlign: middle;
@headerColor: @textColor;
@@ -40,14 +41,17 @@
@headerFontStyle: none;
@headerFontWeight: bold;
@headerTextTransform: none;
+@headerBoxShadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.05);
/* Table Footer */
-@footerBorder: 1px solid rgba(0, 0, 0, 0.1);
+@footerBoxShadow: 0px -1px 1px 0px rgba(0, 0, 0, 0.05);
+@footerBorder: 1px solid @solidBorderColor;
+@footerDivider: none;
@footerBackground: rgba(0, 0, 0, 0.05);
@footerAlign: left;
@footerVerticalAlign: middle;
@footerColor: @textColor;
-@footerVerticalPadding: 1em;
+@footerVerticalPadding: @cellVerticalPadding;
@footerHorizontalPadding: @cellHorizontalPadding;
@footerFontStyle: italic;
@footerFontWeight: normal;
@@ -132,12 +136,9 @@
@sortableIconFont: 'Icons';
@sortableIconAscending: '\f0d7';
@sortableIconDescending: '\f0d8';
-
@sortableDisabledColor: @disabledTextColor;
-
@sortableHoverBackground: @strongTransparentBlack;
@sortableHoverColor: @selectedTextColor;
-
@sortableInvertedHoverBackground: @strongTransparentWhite;
@sortableInvertedHoverColor: @invertedSelectedTextColor;
@@ -148,10 +149,8 @@
/* Inverted */
@invertedBackground: #333333;
@invertedBorder: none;
-
@invertedCellBorderColor: rgba(0, 0, 0, 0.2);
@invertedCellColor: @invertedTextColor;
-
@invertedHeaderBackground: rgba(0, 0, 0, 0.15);
@invertedHeaderColor: rgba(255, 255, 255, 0.9);
@@ -171,9 +170,8 @@
@basicTableCellHorizontalPadding: 0em;
@basicTableStripedBackground: transparent;
-
/* Padded */
-@paddedVerticalPadding: 0.8em;
+@paddedVerticalPadding: 1em;
@paddedHorizontalPadding: 1em;
@compactVerticalPadding: 0.5em;