Limit table styling (PR #966) to narratives

The styling introduced in #966 was global, which meant (e.g.) the tip-clicked panel display was changed (undesired side effect). This moves the CSS introduced there into the styled components used by the narratives

src/components/narrative/MainDisplayMarkdown.js

@@ -95,6 +95,13 @@ const Container = styled.div`
     margin-bottom: 2px;
   }
 
+  table, th, td {
+    border: 1px solid;
+  }
+  td, th {
+    padding: 3px;
+  }
+
 `;
 
 const EXPERIMENTAL_MainDisplayMarkdown = ({narrativeBlock, width, mobile}) => {

src/components/narrative/styles.js

@@ -1,6 +1,5 @@
 import styled, {css} from 'styled-components';
 
-
 export const NarrativeStyles = styled.div`
 
   top: ${(props) => props.narrativeNavBarHeight+"px"};
@@ -18,6 +17,12 @@ export const NarrativeStyles = styled.div`
   p, h1, h2, h3, h4, li, table {
     color: ${(props) => props.theme.unselectedColor};
   }
+  table, th, td {
+    border: 1px solid;
+  }
+  td, th {
+    padding: 3px;
+  }
 
   h1 {
     font-weight: 700;

src/css/global.css

@@ -38,20 +38,17 @@ a, .link {
   font-size: 94%;
 }
 
-/* Table styles: from Bootstrap and customized */
+/* from Bootstrap */
 table {
   border-collapse: collapse;
   border-spacing: 0;
 }
 
-table, th, td {
-  border: 1px solid;
+td,
+th {
+  padding: 0;
 }
-
-td, th {
-  padding: 3px;
-}
-/* end table styles */
+/* end bootstrap */
 
 .panel th {
   text-align: left;