Got scrolling and sizing to somewhat work?

* Outer container is set to position absolute and left/right/bottom/top
  to 0 to make it flood the whole viewport
  * overflow set to hidden.... I don't really know why, but it seems to
    work (in conjunction with the inner div being set to scroll)
* inner container set to overall scroll to get scroll bars if content
  gets too large
* table width set to max-content so that colgroup widths are respected

Still need to figure out what happens in vertical direction when we get
too many rows

core.css

@@ -8,10 +8,12 @@
     top : 0;
     bottom : 0;
     position: absolute;
+    overflow: hidden;
 
 }
 
 .coresheet_content {
+    /* width: 100%; */
     overflow: scroll;
 }
 
@@ -29,6 +31,8 @@
     border-bottom: 1px solid #ccc;
     user-select: none;
 
+    width: max-content;
+
 }
 
 .coresheet > thead > tr > td {

index.html

@@ -10,16 +10,9 @@
         <script src="core.js"></script>
         <script>
             let target = document.getElementById("target");
-            var grid = new Grid(target, [
-                {"name": "A"},
-                {"name": "B"},
-                {"name": "C"},
-                {"name": "D"},
-                {"name": "E"},
-                {"name": "F"},
-                {"name": "G"},
-                {"name": "H"},
-            ], [
+            const columns = [...Array(26).keys()].map(x => {return {name:String.fromCharCode(97+x-32)}});
+
+            var grid = new Grid(target, columns, [
                 {"A" : 123, "B": 234, "C": 3455555555555555, "D": 12345678901234567890, "E": 12345678901234567890, "F": 12345678901234567890, "G": 12345678901234567890, "H": 12345678901234567890},
                 {"A" : 123, "B": 234, "C": 345},
                 {"A" : 123, "B": 234, "C": 345},