replaced style with class for links

public/app/plugins/panel/table/renderer.ts

@@ -214,15 +214,15 @@ export class TableRenderer {
     var style = '';
     var cellClasses = [];
     var cellClass = '';
-    var linkStyle = '';
+    var linkClass = '';
 
     if (this.colorState.row) {
-      linkStyle = ' style="color: white"';
+      linkClass = 'table-panel-link';
     }
 
     if (this.colorState.cell) {
       style = ' style="background-color:' + this.colorState.cell + ';color: white"';
-      linkStyle = ' style="color: white;"';
+      linkClass = 'table-panel-link';
       this.colorState.cell = null;
     } else if (this.colorState.value) {
       style = ' style="color:' + this.colorState.value + '"';
@@ -258,7 +258,12 @@ export class TableRenderer {
 
       cellClasses.push('table-panel-cell-link');
       columnHtml += `
-        <a href="${cellLink}" target="${cellTarget}" data-link-tooltip data-original-title="${cellLinkTooltip}" data-placement="right"${linkStyle}>
+        <a href="${cellLink}"
+           target="${cellTarget}"
+           data-link-tooltip
+           data-original-title="${cellLinkTooltip}"
+           data-placement="right"
+           class="${linkClass}">
           ${value}
         </a>
       `;

public/app/plugins/panel/table/specs/renderer.jest.ts

@@ -268,7 +268,7 @@ describe('when rendering table', () => {
       var expectedHtml = `
         <td class="table-panel-cell-link">
           <a href="/dashboard?param=host1&param_1=1230&param_2=40"
-            target="_blank" data-link-tooltip data-original-title="host1 1230 my.host.com" data-placement="right">
+            target="_blank" data-link-tooltip data-original-title="host1 1230 my.host.com" data-placement="right" class="">
             host1
           </a>
         </td>

public/sass/components/_panel_table.scss

@@ -133,3 +133,7 @@
   height: 0px;
   line-height: 0px;
 }
+
+.table-panel-link {
+  color: white;
+}