From 21245470ae7da73d015447d6eb642b6d2243f0bf Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Thu, 22 Sep 2022 02:51:24 -0400
Subject: [PATCH] TablePanel: Fix FooterRow styling for Safari and Firefox
 (#55543) (#55602)

* Fix FooterRow styling for Safari and Firefox

* Change column header th to div

(cherry picked from commit da78f3393951054b09fdbe56cffdba34b03a6f83)

Co-authored-by: Victor Marin <36818606+mdvictor@users.noreply.github.com>
---
 .../src/components/Table/FooterRow.tsx        | 20 +++++++++----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/packages/grafana-ui/src/components/Table/FooterRow.tsx b/packages/grafana-ui/src/components/Table/FooterRow.tsx
index f92a393a811..59a4659f3d8 100644
--- a/packages/grafana-ui/src/components/Table/FooterRow.tsx
+++ b/packages/grafana-ui/src/components/Table/FooterRow.tsx
@@ -23,7 +23,7 @@ export const FooterRow = (props: FooterRowProps) => {
   const tableStyles = useStyles2(getTableStyles);
 
   return (
-    <table
+    <div
       style={{
         position: isPaginationVisible ? 'relative' : 'absolute',
         width: totalColumnsWidth ? `${totalColumnsWidth}px` : '100%',
@@ -33,22 +33,20 @@ export const FooterRow = (props: FooterRowProps) => {
       {footerGroups.map((footerGroup: HeaderGroup) => {
         const { key, ...footerGroupProps } = footerGroup.getFooterGroupProps();
         return (
-          <tfoot
+          <div
             className={tableStyles.tfoot}
             {...footerGroupProps}
             key={key}
             data-testid={e2eSelectorsTable.footer}
             style={height ? { height: `${height}px` } : undefined}
           >
-            <tr>
-              {footerGroup.headers.map((column: ColumnInstance, index: number) =>
-                renderFooterCell(column, tableStyles, height)
-              )}
-            </tr>
-          </tfoot>
+            {footerGroup.headers.map((column: ColumnInstance, index: number) =>
+              renderFooterCell(column, tableStyles, height)
+            )}
+          </div>
         );
       })}
-    </table>
+    </div>
   );
 };
 
@@ -67,9 +65,9 @@ function renderFooterCell(column: ColumnInstance, tableStyles: TableStyles, heig
   }
 
   return (
-    <th className={tableStyles.headerCell} {...footerProps}>
+    <div className={tableStyles.headerCell} {...footerProps}>
       {column.render('Footer')}
-    </th>
+    </div>
   );
 }