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

Я хочу создать таблицу с помощью 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>

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

В комментариях к промежуточной площадке вы упомянули, что нечто похожее на то, чего вы хотите достичь, можно было достичь, используя flexbox и распределяя оставшееся пространство поровну. Но в таблице это не сработает — между строками таблицы нет «пространства». Я думаю, что в лучшем случае вы сможете решить эту проблему, вставив «псевдостроки» с пустыми ячейками, а затем позволив этим строкам расти по мере необходимости, чтобы заполнить минимальную высоту.

— 27.08.2024 11:02

html css html-table

27.08.2024 11:01

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

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

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

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

Это прекрасно работает, но можем ли мы добавить нижнюю границу и к последнему элементу?

— 28.08.2024 05:40

Я пересмотрел свой ответ. Пожалуйста, исправьте все дополнительные ошибки самостоятельно. @Встретиться

— 28.08.2024 06:14

Да, отлично, спасибо за решение и ваше время.

— 28.08.2024 06:15

27.08.2024 12:03