tweak table header styling

Author: bkdotcom

src/Debug/Dump/Html/Table.php

@@ -198,15 +198,7 @@ protected function buildFooter()
      */
     protected function buildHeader()
     {
-        $labels = \array_map(function (array $colInfo) {
-            $label = $this->dumper->valDumper->dump($colInfo['key'], array(
-                'tagName' => null,
-            ));
-            if (!empty($colInfo['class'])) {
-                $label .= ' ' . $this->dumper->valDumper->markupIdentifier($colInfo['class'], 'className');
-            }
-            return $label;
-        }, $this->options['tableInfo']['columns']);
+        $labels = \array_map([$this, 'buildHeaderLabel'], $this->options['tableInfo']['columns']);
         $keyLabel = $this->options['tableInfo']['commonRowInfo']['keyOutput']
             ? ($this->options['tableInfo']['indexLabel']
                 ? '<th class="text-right">' . $this->options['tableInfo']['indexLabel'] . '</th>'
@@ -218,11 +210,35 @@ protected function buildHeader()
                 . ($this->options['tableInfo']['haveObjRow']
                     ? '<th>&nbsp;</th>'
                     : '')
-                . '<th scope="col">' . \implode('</th><th scope="col">', $labels) . '</th>'
+                . \implode('', $labels)
             . '</tr>' . "\n"
             . '</thead>' . "\n";
     }
 
+    /**
+     * Build header label th tag
+     *
+     * @param array $colInfo Column information
+     *
+     * @return string
+     */
+    protected function buildHeaderLabel($colInfo)
+    {
+        $type = $this->debug->abstracter->type->getType($colInfo['key']);
+        $label = $this->dumper->valDumper->dump($colInfo['key'], array(
+            'tagName' => null,
+        ));
+        if (!empty($colInfo['class'])) {
+            $label .= ' ' . $this->dumper->valDumper->markupIdentifier($colInfo['class'], 'className');
+        }
+        return $this->debug->html->buildTag('th', array(
+            'class' => $type[0] !== 'string'
+                ? 't_' . $type[0]
+                : null,
+            'scope' => 'col',
+        ), $label);
+    }
+
     /**
      * Returns table row
      *

src/Debug/css/Debug.css

@@ -9,7 +9,7 @@
 .debug {
 
   --font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
-  --font-family-numeric: Courier New, monospace, Ariel;
+  --font-family-numeric: monospace, Arial;
   --font-size: 13px;
 
   font-size: var(--font-size);

src/Debug/scss/Debug.scss

@@ -43,16 +43,18 @@ $color-stringified-shadow: rgba(0, 200, 200, 0.6);
 .t_float,
 .t_string[data-type-more=numeric],
 .t_string[data-type-more=timestamp] {
-  font-family: var(--font-family-numeric) !important;
   color: var(--color-numeric);
-  font-size: 1.15em;
-  line-height: 1.15em;
+  font-family: var(--font-family-numeric) !important;
+  // font-size: 1.15em;
+  // line-height: 1.15em;
+  /*
   &::before,
   &::after {
-    // undo font-size increase got
+    // undo font-size increase
     font-family: var(--font-family);
     font-size: 0.8695em;
   }
+  */
 }
 
 .t_key {