CODEWITHSUNDEEP
javascripthtmlcss
Dean
Dean

Reputation: 80

How do you position a table body to "fit" into table headers and row headers?

I have a table like so: enter image description here
I am wondering how to have the table body fit between these headers for both the columns and rows. Currently, when inserting a new row and table data into the table body it is inserted under the total.

I would like that when inserting new rows/data using javascript, it will be inserted in the space left by the column and row headers. In the "gap". 

*{
  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;
}
table, th, td{
  padding: 5px;
  border: 2px solid white;
}
<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>
        <th>Weeks</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>
      <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>
    </thead>
    <tbody>

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

'use strict'
let table = document.getElementById("mainTable")
let cell1 = table.getElementsByTagName("tbody")[0].insertRow(0).insertCell(0)
cell1.innerHTML = "hello world"

https://jsfiddle.net/wmrb4p5x/1/

Upvotes: 0

Views: 1620

Answers (2)

Tyler Roper
Tyler Roper

Reputation: 21672

Rather than adding rows, consider moving your data rows to <tbody>, looping through them, and adding a cell for each column like so:

let table = document.getElementById("mainTable");
let rows = table.querySelectorAll("tbody tr");
rows.forEach(row => {
  row.insertCell(1).innerHTML = "5"; //28/01/2019
  row.insertCell(1).innerHTML = "4"; //21/01/2019
  row.insertCell(1).innerHTML = "3"; //14/01/2019
  row.insertCell(1).innerHTML = "2"; //07/01/2019
  row.insertCell(1).innerHTML = "1"; //31/12/2018
});
* {
  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;
}

table,
th,
td {
  padding: 5px;
  border: 2px solid white;
}
<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>
        <th>Weeks</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>

Upvotes: 1

zgood
zgood

Reputation: 12571

You can just include the <th> header cell in the <tbody> rows as the first cell. <th> isn't limited to just <thead> nodes.

      <tr>
        <th>Balance</th>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
      </tr>

Like this:

*{
  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;
}
table, th, td{
  padding: 5px;
  border: 2px solid white;
}
<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>
        <th>Weeks</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>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
      </tr>
      <tr>
        <th>Pay</th>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
      </tr>
      <tr>
        <th>&nbsp</th>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
      </tr>
      <tr>
        <th>Rent</th>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
      </tr>
      <tr>
        <th>Food</th>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
      </tr>
      <tr>
        <th>&nbsp</th>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
      </tr>
      <tr>
        <th>Total</th>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
      </tr>
    </tbody>
  </table>
</body>
<script src="MMS.js"></script>
</html>

Upvotes: 2

Related Questions