diff --git a/src/polyglot-notebooks-ui-components/src/components/VariableGrid.tsx b/src/polyglot-notebooks-ui-components/src/components/VariableGrid.tsx
index 4522aef3eb..8f1a317c51 100644
--- a/src/polyglot-notebooks-ui-components/src/components/VariableGrid.tsx
+++ b/src/polyglot-notebooks-ui-components/src/components/VariableGrid.tsx
@@ -212,7 +212,9 @@ export class VariableGrid extends React.Component<VariableGridProps, VariableGri
                     const affectedColumn: any = document.querySelector(`col.${affectedColumnClass}`)!;
 
                     targetColumn.style["width"] = `${endSizePercentage}%`;
+                    targetColumn.style["max-width"] = `${endSizePercentage}%`;
                     affectedColumn.style["width"] = `${w}%`;
+                    affectedColumn.style["max-width"] = `${w}%`;
                 }
             }
         }
diff --git a/src/polyglot-notebooks-ui-components/src/style.css b/src/polyglot-notebooks-ui-components/src/style.css
index a6b516ebe7..d4334300b8 100644
--- a/src/polyglot-notebooks-ui-components/src/style.css
+++ b/src/polyglot-notebooks-ui-components/src/style.css
@@ -15,8 +15,9 @@
 table {
     width: 100%;
     border-collapse: collapse;
-    overflow-x: auto;
+    position: relative;
     overflow-y: auto;
+    table-layout: fixed;
 }
 
 th,
@@ -52,7 +53,6 @@ td {
 
 .table-container {
     width: 100%;
-    margin: 5px;
 }
 
 .data-cell {
@@ -84,22 +84,28 @@ td {
 }
 
 col.name-column {
+    max-width: 20%;
     width: 20%;
 }
 
 col.type-column {
+    max-width: 15%;
     width: 15%;
 }
 
 col.value-column {
+    max-width: 40%;
     width: 40%;
 }
 
 col.kernel-column {
+    max-width: 15%;
     width: 15%;
 }
 
+
 col.actions-column {
+    max-width: 10%;
     width: 10%;
 }