Создайте таблицу с пустым местом внизу

Я хочу создать таблицу с помощью min-height: 90vh, чтобы она не становилась меньше этой конкретной высоты, но когда я это делаю, высота столбцов увеличивается и занимает место в соответствии с высотой таблицы, и это проблема. Я не хочу, чтобы высота каждого столбца превышала 30px.

Также у меня есть нижний колонтитул внизу, который должен находиться внизу таблицы, а столбцы должны быть выровнены вверху. Поэтому между столбцами и нижним колонтитулом должно быть пустое пространство.

Изображение ниже представляет ожидаемый результат.

И это то, что я пробовал до сих пор. Также поделитесь, почему высота, примененная к th и td, не работает.

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>

Заранее спасибо.

🤔 А знаете ли вы, что...
HTML поддерживает механизмы для встраивания JavaScript-кода для создания интерактивных элементов.

[РЕШЕНО]Перейти к решению

Html113619 вопросов Css75481 вопрос Html table2465 вопросов

Ответ:

Решено

Можете ли вы попробовать это?

Я думал, что это будет просто... Меня больше заботил стиль, чем я думал.

Кнопка «Добавить строку» предназначена для тестирования, поэтому не беспокойтесь слишком сильно.

// 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>

Создайте таблицу с пустым местом внизу

Ответ:

Интересные вопросы для изучения