diff --git a/ui/src/dashboards/components/TemplateVariableRow.js b/ui/src/dashboards/components/TemplateVariableRow.js
index 395e1198be..36a5d291cd 100644
--- a/ui/src/dashboards/components/TemplateVariableRow.js
+++ b/ui/src/dashboards/components/TemplateVariableRow.js
@@ -16,18 +16,18 @@ const TemplateVariableRow = ({
selectedTagKey,
onSelectTagKey,
}) => (
-
- {label} |
- {code} |
-
+ |
-
+
+
- |
-
+
+
{values.join(', ')}
- |
-
+
+
- |
-
+
+
)
class RowWrapper extends Component {
diff --git a/ui/src/dashboards/components/TemplateVariableTable.js b/ui/src/dashboards/components/TemplateVariableTable.js
index 469e549271..d79a3d63fa 100644
--- a/ui/src/dashboards/components/TemplateVariableTable.js
+++ b/ui/src/dashboards/components/TemplateVariableTable.js
@@ -3,21 +3,21 @@ import React, {PropTypes} from 'react'
import TemplateVariableRow from 'src/dashboards/components/TemplateVariableRow'
const TemplateVariableTable = ({templates}) => (
-
-
-
- Dropdown Label |
- Shortcode |
- Type |
- Queries |
- Values |
- |
-
-
-
+
+
+
+
Dropdown Label
+
Shortcode
+
Type
+
Queries
+
Values
+
+
+
+
{templates.map(t => )}
-
-
+
+
)
const {arrayOf, shape, string} = PropTypes
diff --git a/ui/src/style/components/tables.scss b/ui/src/style/components/tables.scss
index 2d99e41abe..538025bd3f 100644
--- a/ui/src/style/components/tables.scss
+++ b/ui/src/style/components/tables.scss
@@ -3,6 +3,45 @@
----------------------------------------------
*/
+// table-custom class allows us to make a table from divs so we can use
+// forms inside a table
+.table-custom {
+ display: table !important;
+ border-collapse: separate;
+ border-spacing: 2px;
+ width: 100%;
+ padding: 10px;
+ .thead {
+ display: table-header-group;
+ color: white;
+ color: $g17-whisper !important;
+ border-width: 1px;
+ }
+ .th {
+ display: table-cell;
+ font-weight: 700;
+ color: $g14-chromium !important;
+ border: 0 !important;
+ padding: 6px 8px !important;
+ }
+ .tbody {
+ display: table-row-group;
+ }
+ .tr {
+ display: table-row;
+ }
+ .td {
+ display: table-cell;
+ font-weight: 500;
+ color: $g14-chromium !important;
+ border: 0 !important;
+ padding: 6px 8px !important;
+ }
+ .tr.editing .td INPUT {
+ background-color: $g5-pepper;
+ color: $g19-ghost !important;
+ }
+}
table {
thead th {