Add code to display table.

scss/style.scss

@@ -1,13 +1,18 @@
 $off-grey-color: #ededed;
 $off-color: #eef2f9;
 
+html {
+    height: 100%;
+}
+
 body {
     font-family: sans-serif;
+    margin: 2rem;
+    height: 100%;
 }
 
 .main {
     margin: auto;
-    max-width: 1600px;
 }
 
 .split-pane {
@@ -17,6 +22,9 @@ body {
 
 .split-elem {
     flex-grow: 1;
+    flex-shrink: 0;
+    flex-basis: 40%;
+    margin: 0.25rem;
 }
 
 .table-wrapper {
@@ -27,6 +35,7 @@ body {
     display: inline-block;
     margin-top: 1rem;
     box-shadow: 0px 0px 5px rgba(grey, 0.1);
+    box-sizing: border-box;
 }
 
 .class-table {
@@ -70,16 +79,52 @@ body {
     border-radius: 0.25rem;
 
     vertical-align: middle;
+}
 
-    &.color-green {
-        background-color: lighten(#5bc275, 30%);
-        border-color: #5bc275;
-        color: darken(#5bc275, 30%);
-    }
+.color-green {
+    background-color: lighten(#5bc275, 30%);
+    border-color: #5bc275;
+    color: darken(#5bc275, 30%);
+}
 
-    &.color-red {
-        background-color: lighten(#c25b75, 30%);
-        border-color: #c25b75;
-        color: darken(#c25b75, 30%);
+.color-red {
+    background-color: lighten(#c25b75, 30%);
+    border-color: #c25b75;
+    color: darken(#c25b75, 30%);
+}
+
+.week-grid {
+    display: grid;
+    width: 100%;
+    height: 50vh;
+    grid-template-columns: auto repeat(7, 1fr);
+    grid-template-rows: auto repeat(10, 1fr);
+}
+
+.course-block {
+    position: absolute;
+    border: 1px solid;
+    border-radius: 0.25rem;
+    padding: 0.25rem;
+    box-sizing: border-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    &.selected {
+        border-style: dashed;
+        border-width: 2px;
     }
 }
+
+.column-container {
+    position: relative;
+    padding: 0.25rem;
+    box-sizing: border-box;
+    border-left: 0.5px solid lighten(grey, 20%);
+    border-right: 0.5px solid lighten(grey, 20%);
+}
+
+.table-day-header {
+    padding: 0.25rem;
+    text-align: center;
+}