jupyter: table style tweaks (#1345)

Author: MykolaGolubyev

znai-docs/znai/release-notes/1.79/add-2025-09-07-jupyter-table-style-tweaks.md

@@ -0,0 +1 @@
+* Add: Jupyter notebook table output style tweaks

znai-reactjs/src/doc-elements/jupyter/Jupyter.demo.jsx

@@ -1,4 +1,5 @@
 /*
+ * Copyright 2025 znai maintainers
  * Copyright 2019 TWO SIGMA OPEN SOURCE, LLC
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -14,43 +15,34 @@
  * limitations under the License.
  */
 
-import React from 'react'
-import JupyterCell from './JupyterCell'
+import React from "react";
+import JupyterCell from "./JupyterCell";
 
-import {elementsLibrary} from '../DefaultElementsLibrary'
+import { elementsLibrary } from "../DefaultElementsLibrary";
 
 const simpleNotebook = {
-    cells: [
-        {
-            "cellType" : "code",
-            "lang" : "python",
-            "snippet" : "from pandas import read_csv\nfrom IPython.display import display",
-            "type" : "JupyterCell"
-        },
-        {
-            cellType : "output",
-            text:
-            "   a   b   c\n" +
-            "0  1   2   3\n" +
-            "1  4   5   6\n"
-        },
-        {
-            cellType: "output",
-            html: `
+  cells: [
+    {
+      cellType: "code",
+      lang: "python",
+      snippet: "from pandas import read_csv\nfrom IPython.display import display",
+      type: "JupyterCell",
+    },
+    {
+      cellType: "output",
+      text: "   a   b   c\n" + "0  1   2   3\n" + "1  4   5   6\n",
+    },
+    {
+      cellType: "output",
+      html: `
                             <div>
-                            <style scoped>
-                                .dataframe tbody tr th:only-of-type {
-                                    vertical-align: middle;
-                                }
-                            
-                                .dataframe tbody tr th {
-                                    vertical-align: top;
-                                }
-                            
-                                .dataframe thead th {
-                                    text-align: right;
-                                }
-                            </style>
+                            <style>
+                           .dataframe > thead > tr,
+                           .dataframe > tbody > tr {
+                             text-align: right;
+                             white-space: pre-wrap;
+                           }
+                           </style>
                             <table border="1" class="dataframe">
                               <thead>
                                 <tr style="text-align: right;">
@@ -63,26 +55,26 @@ const simpleNotebook = {
                               <tbody>
                                 <tr>
                                   <th>0</th>
-                                  <td>1</td>
+                                  <td>11</td>
                                   <td>2</td>
                                   <td>3</td>
                                 </tr>
                                 <tr>
                                   <th>1</th>
                                   <td>4</td>
-                                  <td>5</td>
+                                  <td>50</td>
                                   <td>6</td>
                                 </tr>
                               </tbody>
                             </table>
-                            </div> `
-        }
-    ]
-}
+                            </div> `,
+    },
+  ],
+};
 
 export function jupyterDemo(registry) {
-    registry
-        .add('code cell', () => <JupyterCell elementsLibrary={elementsLibrary} {...simpleNotebook.cells[0]}/>)
-        .add('output text cell', () => <JupyterCell elementsLibrary={elementsLibrary} {...simpleNotebook.cells[1]}/>)
-        .add('output htlml cell', () => <JupyterCell elementsLibrary={elementsLibrary} {...simpleNotebook.cells[2]}/>)
+  registry
+    .add("code cell", () => <JupyterCell elementsLibrary={elementsLibrary} {...simpleNotebook.cells[0]} />)
+    .add("output text cell", () => <JupyterCell elementsLibrary={elementsLibrary} {...simpleNotebook.cells[1]} />)
+    .add("output htlml cell", () => <JupyterCell elementsLibrary={elementsLibrary} {...simpleNotebook.cells[2]} />);
 }

znai-reactjs/src/doc-elements/jupyter/JupyterHtmlCell.css

@@ -1,4 +1,5 @@
 /*
+ * Copyright 2025 znai maintainers
  * Copyright 2019 TWO SIGMA OPEN SOURCE, LLC
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -19,17 +20,49 @@
     margin-bottom: var(--znai-snippets-space-below);
 }
 
-.jupyter-html thead tr,
 .jupyter-html table {
+    margin: 0;
+    border-collapse: collapse;
+    background-color: var(--znai-table-body-background-color);
+    border: 1px solid var(--znai-table-border-color);
+}
+
+.jupyter-html thead tr {
     border: none;
 }
 
-.jupyter-html td,
+.jupyter-html thead {
+    background-color: var(--znai-table-header-background-color);
+}
+
 .jupyter-html th {
-    padding: 6px
+    background: var(--znai-table-header-background-color);
+    padding: 12px 16px;
+    font-weight: 600;
+    text-align: left;
+    color: var(--znai-table-title-color);
+    font-size: var(--znai-smaller-text-size);
+    text-transform: uppercase;
+    border-bottom: 1px solid var(--znai-table-border-color);
+    border-right: 1px solid var(--znai-table-border-color);
+}
+
+.jupyter-html th:last-child {
+    border-right: none;
 }
 
-.jupyter-html table td,
-.jupyter-html table th {
-    border: 1px solid var(--znai-snippets-outer-border-color);
-}
+.jupyter-html td {
+    padding: 12px 16px;
+    color: var(--znai-regular-text-color);
+    font-size: var(--znai-regular-text-size);
+    border-bottom: 1px solid var(--znai-table-border-color);
+    border-right: 1px solid var(--znai-table-border-color);
+}
+
+.jupyter-html td:last-child {
+    border-right: none;
+}
+
+.jupyter-html tbody tr:last-child td {
+    border-bottom: none;
+}