go

timetable.css

@@ -7,20 +7,27 @@ table {
     /* margin-top: 50px; */
     padding-top: 100px;
     text-align:center;
-    table-layout : fixed;
+    /* table-layout : fixed; */
     /* width:150px */
-    width: 200%;
-    overflow-x: auto;
+    /* width: 200%; */
+    /* overflow-x: auto;
     display: block;
-    position: relative;
+    position: relative; */
+    border-collapse: separate;
+    border-spacing: 0;
 
 }
 
-#table-div {
-    overflow-x: auto;
+.table-div {
+    /* overflow-x: auto; */
+  width: 80%;
+  overflow-x: scroll;
+  margin-left: 200px;
+  overflow-y: visible;
+  padding: 0;
 }
 
-th {
+.table-div th {
     text-align:center;
     white-space:nowrap;
     transform: rotate(90deg) translateX(-100px);
@@ -28,11 +35,11 @@ th {
     top:0;
 
 }
-th p {
+.table-div th p {
     margin:0 -100% ;
     display:inline-block;
 }
-th p:before{
+.table-div th p:before{
     content:'';
     width:0;
     padding-top:110%;/* takes width as reference, + 10% for faking some extra padding */
@@ -40,20 +47,20 @@ th p:before{
     vertical-align:middle;
 }
 
-td, th {
+.table-div td, th {
     max-width: 10px;
     padding: 0px;
 }
 
-tr {
+.table-div tr {
     padding: 0px;
 }
 
-tr:hover {
+.table-div tr:hover {
     background-color: lightblue;
 }
 
-tr:hover  .unavailable{
+.table-div tr:hover  .unavailable{
 
     background-color: lightgray;
 }
@@ -70,15 +77,14 @@ tr:hover  .unavailable{
 }
 
 .bank-holiday {
-    border: solid 1px blue;
+    border-bottom: dotted 1px blue;
 
 }
 
-th.worker {
+/* th.worker {
     max-width: 100%;
     width: 200px;
-    /* width: 100px; */
-}
+} */
 
 .plymouth {
     color: #9169FF;
@@ -102,6 +108,8 @@ th.worker {
 .worker-summary {
     position: absolute;
     display: none;
+    overflow-x: visible; 
+    width: 100%;
 }
 .site-summary {
 	display: inline-flex;
@@ -125,3 +133,56 @@ th.worker {
 .training-days-lost {
 	padding-top: 5px;
 }
+
+.tdl-settings {
+    padding: 2px;
+}
+
+.table-div + pre {
+    display: none;
+}
+.shift-breakdown-button + pre {
+    display: none;
+}
+
+.shift-breakdown-button {
+    display: block;
+}
+
+.nwd {
+    color: brown;
+}
+
+.th {
+
+}
+
+.table-div th.worker, td.worker {
+  position: absolute;
+  width: 200px;
+  max-width: 200px;
+  left: 0;
+  top: auto;
+  border-top-width: 1px;
+  /*only relevant for first row*/
+  margin-top: -1px;
+  /*compensate for top border*/
+}
+
+.hidden {
+    opacity: 0%;
+}
+
+.tsummary {
+    max-width: auto;
+}
+
+.header th {
+    max-width: 200px;
+
+}
+
+[data-night-at-derriford="1"] {
+    background-color: yellow;
+  /* Attribute has this exact value */
+}