htmlcsshtml-table

Create a table with empty space at bottom

I want to create a table with min-height: 90vh, so it don't get smaller than that particular height but when I do that the columns height gets increased and occupy space as per table height and that's issue. I don't want each column height exceed more then 30px.

Also I have footer at bottom which should be at bottom of the table and columns need to align at top. So there should be white space between columns and footer.

Below image represents expected result. enter image description here

And this is what I have tried till now. Also please share why height applied on th & td is not working.

body,
html {
  background-color: white;
  margin: 0;
  padding: 0;
  height: 100%;
}

table {
  width: 80%;
  min-height: 90vh;
  border-collapse: collapse;
  table-layout: fixed;
}

th,
td {
  border: 1px solid black;
  text-align: center;
  height: 30px;
  font-size: 14px;
  line-height: 30px;
}

th {
  background-color: #f2f2f2;
}

.subject-column {
  width: 50%;
}

.marks-column {
  width: 30%;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>

  <div class="mainDiv">
    <table>
      <tbody>
        <tr>
          <th>Sr no</th>
          <th>Date</th>
          <th class="subject-column">Subject</th>
          <th class="marks-column">Marks</th>
        </tr>
        <tr>
          <td>1.</td>
          <td>26-8-24</td>
          <td>Maths</td>
          <td>B2 ( 60-70 Percentage )</td>
        </tr>
        <tr>
          <td>1.</td>
          <td>26-8-24</td>
          <td>Maths</td>
          <td>B2 ( 60-70 Percentage )</td>
        </tr>
        <tr>
          <td>1.</td>
          <td>26-8-24</td>
          <td>Maths</td>
          <td>B2 ( 60-70 Percentage )</td>
        </tr>
        <tr>
          <td>1.</td>
          <td>26-8-24</td>
          <td>Maths</td>
          <td>B2 ( 60-70 Percentage )</td>
        </tr>
        <tr>
          <td colspan="3" style="text-align: right; padding-right: 10px;">Total</td>
          <td>B2</td>
        </tr>
      </tbody>
    </table>
  </div>



</body>

</html>

Thank You in advance.

Solution

  • Can you try this?

    I thought it would be simple... I was more concerned about style than I thought

    The add row button is for testing, so don't care too much.

    // for test
let mainDiv = document.querySelector(".mainDiv");
let btnAdd = document.querySelector("#button-add");
let tbody = document.querySelector(".mainDiv table tbody");
let emptyRow = document.querySelector(".empty-row");
let totalRow = tbody.querySelector("tr:nth-last-child(2)");

btnAdd.addEventListener("click", () => {
  if(mainDiv.clientHeight > Math.ceil(window.innerHeight * 0.9)) {
    emptyRow.remove();
    totalRow = tbody.querySelector("tr:nth-last-child(1)");
  }
  
  let newRow = document.createElement("tr");
  newRow.innerHTML = `
        <td>1.</td>
        <td>26-8-24</td>
        <td>Maths</td>
        <td>B2 ( 60-70 Percentage )</td>
      `;

  tbody.insertBefore(newRow, totalRow);
});
    body,
html {
  background-color: white;
  margin: 0;
  padding: 0;
  height: 100%;
}

table {
  width: 80%;
  min-height: 90vh;
  border-collapse: collapse;
  table-layout: fixed;
}

tr:nth-last-child(2) {
  height: 100%;
}

th,
td {
  border: 1px solid black;
  text-align: center;
  padding: 5px;
  font-size: 14px;
}

td {
  border-bottom: none;
}

tr:last-child td {
  border-bottom: 1px solid black;
}

th {
  background-color: #f2f2f2;
}

.subject-column {
  width: 50%;
}

.marks-column {
  width: 30%;
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <button id="button-add" style="width: 120px; height: 40px;">ADD ROW</button>

  <div class="mainDiv">
    <table>
      <tbody>
        <tr>
          <th>Sr no</th>
          <th>Date</th>
          <th class="subject-column">Subject</th>
          <th class="marks-column">Marks</th>
        </tr>
        <tr>
          <td>1.</td>
          <td>26-8-24</td>
          <td>Maths</td>
          <td>B2 ( 60-70 Percentage )</td>
        </tr>
        <tr>
          <td>1.</td>
          <td>26-8-24</td>
          <td>Maths</td>
          <td>B2 ( 60-70 Percentage )</td>
        </tr>
        <tr class="empty-row">
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td colspan="3" style="text-align: right; padding-right: 10px;">Total</td>
          <td>B2</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>