Выходная таблица HTML/JS не показывает горизонтальные границы

function getRows(data) {
  return data.map(datum => Object.values(datum).join(',')).join('\n');
}

function createRow(data) {
  const datum = {
    fname: document.getElementById("fname").value,
    lname: document.getElementById("lname").value,
    sname: new Date(document.getElementById("sname").valueAsNumber).toLocaleString(),
    pname: new Date(document.getElementById("pname").valueAsNumber).toLocaleString(),
    jname: document.getElementById("jname").value
  };
  data.push(datum);
  document.getElementById("dataForm").reset();
  renderRows(data);
}

function renderRows(data) {
  const body = document.getElementById("renderedData");
  body.innerHTML = "";
  for (let datum of data) {
    let tr = document.createElement('tr');
    let tdFName = document.createElement('td');
    tdFName.appendChild(document.createTextNode(datum.fname));
    tr.appendChild(tdFName);
    let tdLName = document.createElement('td');
    tdLName.appendChild(document.createTextNode(datum.lname));
    tr.appendChild(tdLName);
    let tdSName = document.createElement('td');
    tdSName.appendChild(document.createTextNode(datum.sname));
    tr.appendChild(tdSName);
    let tdPName = document.createElement('td');
    tdPName.appendChild(document.createTextNode(datum.pname));
    tr.appendChild(tdPName);
    let tdJName = document.createElement('td');
    tdJName.appendChild(document.createTextNode(datum.jname));
    tr.appendChild(tdJName);
    body.appendChild(tr);
  }
}
window.addEventListener('load', () => {
  const data = [];
  document.getElementById('add').addEventListener('click', function(e) {
    createRow(data);
  });
  document.getElementById('getData').addEventListener('click', function(e) {
    console.log(getRows(data));
  });
});

form {
  width: max-content;
  margin: 0 auto 1rem;
}
.control-group {
  display: flex;
  justify-content: space-between;
}
fieldset {
  display: flex;
  flex-flow: column nowrap;
}

fieldset button {
  align-self: flex-end;
}

<form id="dataForm">
  <fieldset>
    <legend>Enter Data</legend>
    <div class="control-group">
      <label for="fname">Name:</label>
      <input id="fname" type="text">
    </div>
    <div class="control-group">
      <label for="lname">Company:</label>
      <input id="lname" type="text">
    </div>
    <div class="control-group">
      <label for="sname">Time In:</label>
      <input id="sname" type="datetime-local">
    </div>
    <div class="control-group">
      <label for="pname">Time Out:</label>
      <input id="pname" type="datetime-local">
    </div>
    <div class="control-group">
      <label for="jname">Description of Work:</label>
      <textarea id="jname"></textarea>
    </div>
    <button type="button" id="add">Add</button>
  </fieldset>
</form>
<table width="400px" align="center" colspan="40" table border="5">
  <thead>
    <tr style="background-color:#8FBC8F;" id='header'>
      <td align="center"><b>Name</b></td>
      <td align="center"><b>Company</b></td>
      <td align="center"><b>Time In</b></td>
      <td align="center"><b>Time Out</b></td>
      <td align="center"><b>Description of Work</b></td>
    </tr>
  </thead>
  <tbody id="renderedData">
  </tbody>
</table>
<button type="button" id="getData">Get Data</button>