wip

src/App.scss

@@ -5,3 +5,5 @@ $fa-font-path: "~font-awesome/fonts";
 @import "~font-awesome/scss/font-awesome";
 
 @import "~@edx/paragon/src/SearchField/SearchField";
+
+@import "./components/Gradebook/gradebook";

src/components/Gradebook/gradebook.scss

@@ -0,0 +1,27 @@
+.gbook { 
+    overflow-x: scroll;
+}
+.table {
+    padding-left: 244px;
+}
+
+.table tr th:first-child {
+    position: absolute;
+    width: 244px;
+    height:50px;    
+}
+.table tr td:first-child {
+    position: absolute;
+    width: 244px;
+    height:50px;    
+}
+.table tr td:not(:first-child) {
+    min-width: 500px;    
+}
+.table tr td:nth-child(2) {
+    box-sizing: content-box;
+    padding-left: 244px;
+}
+.table tr th:nth-child(2) {
+    padding-left: 244px;
+}

src/components/Gradebook/index.jsx

@@ -150,13 +150,15 @@ export default class Gradebook extends React.Component {
               </div>
             </div>
             <br/>
-            <Table
-              columns={this.mapHeadings(this.props.results[0])}
-              data={this.state.grades}
-              tableSortable={true}
-              defaultSortDirection='desc'
-              defaultSortedColumn='username'
-             />
+            <div className="gbook">
+              <Table
+                columns={this.mapHeadings(this.props.results[0])}
+                data={this.state.grades}
+                tableSortable={true}
+                defaultSortDirection='desc'
+                defaultSortedColumn='username'
+              />
+             </div>
             <h5 className="card-title">Gradebook</h5>
             <p className="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
           </div>