diff --git a/ui/src/dashboards/components/GraphOptionsTimeFormat.tsx b/ui/src/dashboards/components/GraphOptionsTimeFormat.tsx
index 2db452f300..7d8ebbbdf5 100644
--- a/ui/src/dashboards/components/GraphOptionsTimeFormat.tsx
+++ b/ui/src/dashboards/components/GraphOptionsTimeFormat.tsx
@@ -71,7 +71,7 @@ class GraphOptionsTimeFormat extends PureComponent<Props, State> {
           items={FORMAT_OPTIONS}
           selected={showCustom ? TIME_FORMAT_CUSTOM : format}
           buttonColor="btn-default"
-          buttonSize="btn-xs"
+          buttonSize="btn-sm"
           className="dropdown-stretch"
           onChoose={this.handleChooseFormat}
         />
diff --git a/ui/src/shared/components/TableGraph.js b/ui/src/shared/components/TableGraph.js
index cca7cf9399..3bbd799e65 100644
--- a/ui/src/shared/components/TableGraph.js
+++ b/ui/src/shared/components/TableGraph.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import _ from 'lodash'
 import classnames from 'classnames'
 
-import {MultiGrid} from 'react-virtualized'
+import {MultiGrid, ColumnSizer} from 'react-virtualized'
 import moment from 'moment'
 
 import {timeSeriesToTableGraph} from 'src/utils/timeSeriesToDygraph'
@@ -193,8 +193,6 @@ class TableGraph extends Component {
     const {tableOptions, colors} = this.props
     const verticalTimeAxis = _.get(tableOptions, 'verticalTimeAxis', true)
     const data = verticalTimeAxis ? this.state.data : this.state.unzippedData
-    const columnCount = _.get(data, ['0', 'length'], 0)
-    const rowCount = data.length
     const timeFormat = _.get(tableOptions, 'timeFormat', TIME_FORMAT_DEFAULT)
     const fieldNames = _.get(tableOptions, 'fieldNames', [TIME_FIELD_DEFAULT])
     const fixFirstColumn = _.get(
@@ -215,14 +213,13 @@ class TableGraph extends Component {
     const isFieldName = verticalTimeAxis ? rowIndex === 0 : columnIndex === 0
 
     const isFixedCorner = rowIndex === 0 && columnIndex === 0
-    const isLastRow = rowIndex === rowCount - 1
-    const isLastColumn = columnIndex === columnCount - 1
-    const isHighlighted =
-      rowIndex === parent.props.scrollToRow ||
-      columnIndex === parent.props.scrollToColumn ||
-      (rowIndex === hoveredRowIndex && hoveredRowIndex !== 0) ||
-      (columnIndex === hoveredColumnIndex && hoveredColumnIndex !== 0)
     const dataIsNumerical = _.isNumber(data[rowIndex][columnIndex])
+    const isHighlightedRow =
+      rowIndex === parent.props.scrollToRow ||
+      (rowIndex === hoveredRowIndex && hoveredRowIndex !== 0)
+    const isHighlightedColumn =
+      columnIndex === parent.props.scrollToColumn ||
+      (columnIndex === hoveredColumnIndex && hoveredColumnIndex !== 0)
 
     let cellStyle = style
 
@@ -243,9 +240,8 @@ class TableGraph extends Component {
       'table-graph-cell__fixed-row': isFixedRow,
       'table-graph-cell__fixed-column': isFixedColumn,
       'table-graph-cell__fixed-corner': isFixedCorner,
-      'table-graph-cell__last-row': isLastRow,
-      'table-graph-cell__last-column': isLastColumn,
-      'table-graph-cell__highlight': isHighlighted,
+      'table-graph-cell__highlight-row': isHighlightedRow,
+      'table-graph-cell__highlight-column': isHighlightedColumn,
       'table-graph-cell__numerical': dataIsNumerical,
       'table-graph-cell__isFieldName': isFieldName,
     })
@@ -256,6 +252,10 @@ class TableGraph extends Component {
     const fieldName =
       foundField && (foundField.displayName || foundField.internalName)
 
+    const cellContents = isTimeData
+      ? `${moment(cellData).format(timeFormat)}`
+      : fieldName || `${cellData}`
+
     return (
       <div
         key={key}
@@ -263,10 +263,9 @@ class TableGraph extends Component {
         className={cellClass}
         onClick={isFieldName ? this.handleClickFieldName(cellData) : null}
         onMouseOver={this.handleHover(columnIndex, rowIndex)}
+        title={cellContents}
       >
-        {isTimeData
-          ? `${moment(cellData).format(timeFormat)}`
-          : fieldName || `${cellData}`}
+        {cellContents}
       </div>
     )
   }
@@ -287,7 +286,8 @@ class TableGraph extends Component {
 
     const columnCount = _.get(data, ['0', 'length'], 0)
     const rowCount = data.length
-    const COLUMN_WIDTH = 300
+    const COLUMN_MIN_WIDTH = 98
+    const COLUMN_MAX_WIDTH = 500
     const ROW_HEIGHT = 30
     const tableWidth = _.get(this, ['gridContainer', 'clientWidth'], 0)
     const tableHeight = _.get(this, ['gridContainer', 'clientHeight'], 0)
@@ -309,34 +309,44 @@ class TableGraph extends Component {
         onMouseOut={this.handleMouseOut}
       >
         {!_.isEmpty(data) &&
-          <MultiGrid
+          <ColumnSizer
             columnCount={columnCount}
-            columnWidth={COLUMN_WIDTH}
-            rowCount={rowCount}
-            rowHeight={ROW_HEIGHT}
-            height={tableHeight}
+            columnMaxWidth={COLUMN_MAX_WIDTH}
+            columnMinWidth={COLUMN_MIN_WIDTH}
             width={tableWidth}
-            fixedColumnCount={fixedColumnCount}
-            fixedRowCount={1}
-            enableFixedColumnScroll={true}
-            enableFixedRowScroll={true}
-            timeFormat={
-              tableOptions ? tableOptions.timeFormat : TIME_FORMAT_DEFAULT
-            }
-            fieldNames={
-              tableOptions ? tableOptions.fieldNames : [TIME_FIELD_DEFAULT]
-            }
-            scrollToRow={scrollToRow}
-            scrollToColumn={scrollToColumn}
-            verticalTimeAxis={verticalTimeAxis}
-            sortField={sortField}
-            sortDirection={sortDirection}
-            cellRenderer={this.cellRenderer}
-            hoveredColumnIndex={hoveredColumnIndex}
-            hoveredRowIndex={hoveredRowIndex}
-            hoverTime={hoverTime}
-            colors={colors}
-          />}
+          >
+            {({getColumnWidth, registerChild}) =>
+              <MultiGrid
+                ref={registerChild}
+                columnCount={columnCount}
+                columnWidth={getColumnWidth}
+                rowCount={rowCount}
+                rowHeight={ROW_HEIGHT}
+                height={tableHeight}
+                width={tableWidth}
+                fixedColumnCount={fixedColumnCount}
+                fixedRowCount={1}
+                enableFixedColumnScroll={true}
+                enableFixedRowScroll={true}
+                timeFormat={
+                  tableOptions ? tableOptions.timeFormat : TIME_FORMAT_DEFAULT
+                }
+                fieldNames={
+                  tableOptions ? tableOptions.fieldNames : [TIME_FIELD_DEFAULT]
+                }
+                scrollToRow={scrollToRow}
+                scrollToColumn={scrollToColumn}
+                verticalTimeAxis={verticalTimeAxis}
+                sortField={sortField}
+                sortDirection={sortDirection}
+                cellRenderer={this.cellRenderer}
+                hoveredColumnIndex={hoveredColumnIndex}
+                hoveredRowIndex={hoveredRowIndex}
+                hoverTime={hoverTime}
+                colors={colors}
+                classNameBottomRightGrid="table-graph--scroll-window"
+              />}
+          </ColumnSizer>}
       </div>
     )
   }
diff --git a/ui/src/shared/components/ThresholdsList.js b/ui/src/shared/components/ThresholdsList.js
index 638937078b..80deeba349 100644
--- a/ui/src/shared/components/ThresholdsList.js
+++ b/ui/src/shared/components/ThresholdsList.js
@@ -123,8 +123,9 @@ class ThresholdsList extends Component {
     const {thresholdsListColors, showListHeading} = this.props
     const disableAddThreshold = thresholdsListColors.length > MAX_THRESHOLDS
 
-    const thresholdsListClass = `thresholds-list${showListHeading &&
-      ' graph-options-group'}`
+    const thresholdsListClass = `thresholds-list${showListHeading
+      ? ' graph-options-group'
+      : ''}`
 
     return (
       <div className={thresholdsListClass}>
diff --git a/ui/src/style/components/table-graph.scss b/ui/src/style/components/table-graph.scss
index bbdf0d4ffb..1a217e1bf5 100644
--- a/ui/src/style/components/table-graph.scss
+++ b/ui/src/style/components/table-graph.scss
@@ -20,18 +20,20 @@
   font-size: 13px;
   color: $g12-forge;
   border: 1px solid $g5-pepper;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 
-  // Blue Highlight
+  // Highlight
   &:after {
     content: '';
     position: absolute;
-    top: -1px;
-    left: -1px;
-    width: calc(100% + 2px);
-    height: calc(100% + 2px);
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
     z-index: 5;
-    border: 2px solid $c-pool;
-    border-radius: 3px;
+    background-color: rgba(255,255,255,0.2);
     visibility: hidden;
     box-sizing: border-box;
   }
@@ -57,15 +59,13 @@
     color: $g18-cloud;
     background-color: $g5-pepper;
   }
-  &__last-row {
-    border-bottom: 0;
+  &__highlight-row:after,
+  &__highlight-column:after {
+    visibility: visible;
   }
-  &__last-column {
-    border-right: 0;
-  }
-  &__highlight {
-    background-color: $g6-smoke;
-    color: $g16-pearl;
+  &__highlight-row.table-graph-cell__highlight-column {
+    border-color: $g20-white;
+    &:after {visibility: hidden;}
   }
   &__isFieldName:hover {
     cursor: pointer;
@@ -79,15 +79,6 @@
   }
   &__isSortedDown {
   }
-  &__highlight:not(.table-graph-cell__fixed-row):not(.table-graph-cell__fixed-column):not(.table-graph-cell__fixed-corner) {
-    color: $g14-chromium;
-    background-color: $g6-smoke;
-  }
-  &:hover:not(.table-graph-cell__fixed-row):not(.table-graph-cell__fixed-column):not(.table-graph-cell__fixed-corner) {
-    color: $g20-white;
-    background-color: $g0-obsidian;
-    &:after {visibility: visible;}
-  }
 }
 
 .ReactVirtualized__Grid {
@@ -95,25 +86,36 @@
     outline: none;
   }
   &::-webkit-scrollbar {
-    width: 0;
-
-    &-button {
-      background-color: #f00;
-    }
-    &-track {
-      background-color: #f00;
-    }
-    &-track-piece {
-      background-color: #f00;
-    }
-    &-thumb {
-      background-color: #fff;
-    }
-    &-corner {
-      background-color: #f00;
-    }
+    width: 0px;
+    height: 0px;
   }
-  &::-webkit-resizer {
-    background-color: #f00;
+  &.table-graph--scroll-window {
+    &::-webkit-scrollbar {
+      width: 10px;
+      height: 10px;
+
+      &-button {
+        background-color: $g5-pepper;
+      }
+      &-track {
+        background-color: $g5-pepper;
+      }
+      &-track-piece {
+        background-color: $g5-pepper;
+        border: 2px solid $g5-pepper;
+        border-radius: 5px;
+      }
+      &-thumb {
+        background-color: $g11-sidewalk;
+        border: 2px solid $g5-pepper;
+        border-radius: 5px;
+      }
+      &-corner {
+        background-color: $g5-pepper;
+      }
+    }
+    &::-webkit-resizer {
+      background-color: $g5-pepper;
+    }
   }
 }