Невозможно удалить отступы в таблице

Question

Я пытаюсь удалить заполнение из ячеек внутри моего стола. Я установил, чтобы не было заполнения в соответствующих селекторах CSS, но это не помогло.

Как видите, на всех этих клетках есть отступы.

Я бы хотел, чтобы там не было. Я пробовал различные настройки отступов, и изменение вертикального выравнивания не имеет значения, кроме как для перемещения текста, отступы просто идут от всех внизу, чтобы распространяться между нижней и верхней частями.

Ниже приведен код:

'use strict'
let table = document.getElementById("mainTable")
let rows = table.querySelectorAll("tbody tr")
let columns = table.querySelectorAll("#weeks th")

for (let row of rows) {
  for (let o = 0; o<columns.length-1; o++) {
    let cell = document.createElement("td")
    cell.innerHTML='&nbsp'


    cell.addEventListener("click", function() {
      if (cell.getElementsByTagName("input")[0]) { return } //If cell currently has an input box
      //
      let oldValue = ""
      if (cell.innerHTML !== "&nbsp;") { //if cell has a saved value
        oldValue = cell.innerHTML
      }
      cell.innerHTML = '<input type="text" class="cellInputs">'

      //update input box with old value and focus it
      cell.getElementsByTagName("input")[0].focus()
      cell.getElementsByTagName("input")[0].value = oldValue

      cell.getElementsByTagName("input")[0].addEventListener("keypress", function(e) {
        if (e.keyCode === 13) {
          cell.innerHTML=cell.getElementsByTagName("input")[0].value
          e.preventDefault()
          return true
        }
      })
      cell.getElementsByTagName("input")[0].addEventListener("input", function(e) {
        console.log(e)
        let cellValue = cell.getElementsByTagName("input")[0].value
        if (e.data === "." && (cellValue.split('.').length-1 > 1 || cellValue === ".")) {
          console.log("stop")
          cell.getElementsByTagName("input")[0].value = (cellValue).substring(0, cellValue.length - e.data.length)
        }
        if (isNaN(e.data) && e.data !==".") {
          console.log("Stop")
          cell.getElementsByTagName("input")[0].value = (cellValue).substring(0, cellValue.length - e.data.length)
        }

        //store value inputted into the actual cell
      })
      cell.getElementsByTagName("input")[0].addEventListener("paste", function(e) {
   //      clipboardData = e.clipboardData || window.clipboardData;
   // pastedData = clipboardData.getData('Text');

        let cellValue = cell.getElementsByTagName("input")[0].value
        if (cellValue !== "") {
          e.preventDefault()
          return false
        }
        if (e.clipboardData.getData('text') === "." && (cellValue.split('.').length-1 > 1 || cellValue === ".")) {
          e.preventDefault()
          return false
        }
        if (isNaN(e.clipboardData.getData('text')) && e.clipboardData.getData('text') !==".") {
          e.preventDefault()
          return false
        }

        //store value inputted into the actual cell
      })
      cell.getElementsByTagName("input")[0].addEventListener("focusout", function() {
        console.log(document.activeElement)
        cell.innerHTML=cell.getElementsByTagName("input")[0].value
      })
    })


    row.appendChild(cell)
  }
}

*{
  padding: 0;
  margin: 0;
  font-family: "Trebuchet MS", Times, serif;
  box-sizing:border-box;
}
html{
  background-color: #35454E;
  overflow: hidden;
}
html *{
  font-family: "Work Sans", Arial, sans-serif !important;
  color: white !important;
}
table{
  border-collapse: collapse;
  border-spacing: 0px;
  color:#35454E;
  height:100%;
  width:100%;
}
table, th{
  border: 2px solid white;
  padding:0;
}
th{
  vertical-align:top;
  font-size: 2.5vw;
}
td{
  vertical-align:top;
  box-sizing:border-box;
  position: relative;
    border: 2px solid white;
    padding:0;
    text-align: center;
    font-size: 2.5vw;
    padding:0;
}
.cellInputs{
  position: absolute;
  width:100%;
  height:100%;
  display: block;
  top:0;
  left:0;
  border:none;
  text-align: center;
  background-color: #35454E;
  word-wrap: break-word;
  font-size: 2.5vw;
}

<html>
<head>
  <link rel="stylesheet" type="text/css" href="MMS.css">
  <title>Money Management</title>
</head>
<body>
  <table id="mainTable"> 
    <thead>
      <tr>
        <th>2019</th>
        <th colspan="5">January</th>
      </tr>
      <tr id="weeks">
        <th>&nbsp</th>
        <th>31/12/2018</th>
        <th>07/01/2019</th>
        <th>14/01/2019</th>
        <th>21/01/2019</th>
        <th>28/01/2019</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>Balance</th>
      </tr>
      <tr>
        <th>Pay</th>
      </tr>
      <tr>
        <th>&nbsp</th>
      </tr>
      <tr>
        <th>Rent</th>
      </tr>
      <tr>
        <th>Food</th>
      </tr>
      <tr>
        <th>&nbsp</th>
      </tr>
      <tr>
        <th>Total</th>
      </tr>

    </tbody>
  </table>
</body>
<script src="MMS.js"></script>
</html>

Answer 1

Удалить height:100% из таблицы.