Блог

Главная - Вопросы по программированию - Сделать так, чтобы tfoot всегда оставался внизу таблицы, даже если для заполнения таблицы недостаточно строки

Сделать так, чтобы tfoot всегда оставался внизу таблицы, даже если для заполнения таблицы недостаточно строки

#html #css #html-table

#HTML #css #html-таблица

Вопрос:

Я не могу найти, как я могу заставить свой tfoot придерживаться нижней части моей таблицы.

 div {
  height: 200px;
  background-color: lightpink;
  overflow-y: scroll;
}

table {
  border-collapse: collapse;
}

thead tr th {
  background-color: lightblue;
  position: sticky;
  top: 0;
}

tbody td {
  border-top: solid 1px grey;
  padding: 5px 10px;
}

tfoot {
  position: sticky;
  bottom: 0;
}

tfoot tr th {
  background-color: lightblue;
  border-top: solid 1px grey;
  padding: 5px 10px;
} 
 <div>
  <table>
    <thead>
      <tr>
        <th>name</th>
        <th>amount</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>john</td>
        <td>120$</td>
      </tr>
      <tr>
        <td>hammond</td>
        <td>80$</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th>total</th>
        <th>200</th>
      </tr>
    </tfoot>
  </table>
</div>

Выше приведен фрагмент текущего поведения. Здесь также используется тот же фрагмент кода.

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

Я пытался установить высоту таблицы на 100%, но это только делает строки выше. Я пробовал другую позицию, но не смог заставить ее работать.

Есть идеи, как этого добиться?

Метки: , ,