Как поставить margin-bottom в мат-столе (Angular 4+)?

Question

У меня есть стол, и у меня также есть нижний колонтитул.Когда строки увеличиваются, список перекрывается нижним колонтитулом.Как я могу поместить поле поля в последнюю строку таблицы?

Я легко могу сделать это в Chrome Inspect, но я не могу сделать это в HTML / CSS, так как он не будет читать класс.

 <table mat-table class="marginBottom" [userSource]="users$ | async" matSort>

.marginBottom {
        margin-bottom: 30px;
}

Answer 1

если у вас ничего не работает, попробуйте переопределить стиль в глобальном css или scss, то есть styles.css в корневом каталоге.

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

Answer 2

Маржа дает вам место после таблицы.Вместо поля вы можете использовать отступы для таблицы, чтобы освободить место перед последним дочерним элементом.

marginBottom {
 padding-bottom : 30px;
}

Answer 3

Вы можете применить маржу к последней строке таблицы.попробуйте сделать

table tr:last-child {
   margin-bottom: 30px;
}

Answer 4

Используйте псевдоселектор last-child :

table:last-child {
  margin-bottom: 30px;
}