diff --git a/znai-docs/znai/release-notes/1.79/add-2025-09-07-jupyter-table-style-tweaks.md b/znai-docs/znai/release-notes/1.79/add-2025-09-07-jupyter-table-style-tweaks.md
new file mode 100644
index 000000000..e5f2b3591
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/znai-reactjs/src/doc-elements/jupyter/Jupyter.demo.jsx b/znai-reactjs/src/doc-elements/jupyter/Jupyter.demo.jsx
index a4cdfab30..21ed31b75 100644
--- a/znai-reactjs/src/doc-elements/jupyter/Jupyter.demo.jsx
+++ b/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: `
-
+
@@ -63,26 +55,26 @@ const simpleNotebook = {
| 0 |
- 1 |
+ 11 |
2 |
3 |
| 1 |
4 |
- 5 |
+ 50 |
6 |
-
`
- }
- ]
-}
+ `,
+ },
+ ],
+};
export function jupyterDemo(registry) {
- registry
- .add('code cell', () => )
- .add('output text cell', () => )
- .add('output htlml cell', () => )
+ registry
+ .add("code cell", () => )
+ .add("output text cell", () => )
+ .add("output htlml cell", () => );
}
diff --git a/znai-reactjs/src/doc-elements/jupyter/JupyterHtmlCell.css b/znai-reactjs/src/doc-elements/jupyter/JupyterHtmlCell.css
index 435d64980..fd054c475 100644
--- a/znai-reactjs/src/doc-elements/jupyter/JupyterHtmlCell.css
+++ b/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);
-}
\ No newline at end of file
+.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;
+}