.grid_content {
  touch-action: pan-x pan-y;
  grid-row: 1 / span 1;
  overflow: auto;
}

.table1 {
  display: grid;
  grid-template-columns:
  calc(var(--unit) * 4) calc(var(--unit) * 2)
  repeat(2, calc(var(--unit) * 2)) repeat(2, 1fr) calc(var(--unit) * 4)
  repeat(2, calc(var(--unit) * 2)) repeat(2, 1fr) calc(var(--unit) * 4)
  repeat(2, calc(var(--unit) * 2)) repeat(2, 1fr) calc(var(--unit) * 4)
  repeat(2, calc(var(--unit) * 2)) repeat(2, 1fr) calc(var(--unit) * 4)
  repeat(2, calc(var(--unit) * 2)) repeat(2, 1fr) calc(var(--unit) * 4)
  repeat(2, calc(var(--unit) * 2)) repeat(2, 1fr);
  grid-template-rows:
  calc(var(--unit) * 4) calc(var(--unit) * 2)
  repeat(7, 1fr calc(var(--unit) * 2)
  1fr calc(var(--unit) * 2)
  1fr calc(var(--unit) * 2)
  1fr calc(var(--unit) * 2)
  1fr calc(var(--unit) * 4))
  1fr calc(var(--unit) * 2)
  1fr calc(var(--unit) * 2)
  1fr calc(var(--unit) * 2)
  1fr calc(var(--unit) * 2)
  1fr;
  min-width: max-content;
  height: max-content;
}

.table1_content,
.coordinate_hor,
.coordinate_ver,
.coordinate_corner {
  transform-origin: top left;
}

.coordinate_hor,
.coordinate_ver,
.coordinate_corner {
  position: sticky;
  position: -webkit-sticky;
  background-color: rgb(102, 204, 204);
}

.coordinate_hor {
  display: grid;
  grid-template-columns: inherit;
  grid-template-rows: inherit;
  grid-row: 1 / span 2;
  grid-column: 1 / span 999;
  top: 0px; 
}

.coordinate_ver {
  display: grid;
  grid-template-columns: inherit;
  grid-template-rows: inherit;
  grid-row: 1 / span 999;
  grid-column: 1 / span 2;
  left: 0px;
}

.coordinate_corner {
  display: grid;
  grid-template-columns: inherit;
  grid-template-rows: inherit;
  grid-row: 1 / span 2;
  grid-column: 1 / span 2;
  left: 0px;
  top: 0px;
}

/* check needed or not*/
/*.table1 * {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}*/