Почему я не могу применить границу к угловому ряду таблицы матов?

Question

У меня есть простая таблица угловых материалов:

<table mat-table [dataSource]="scoreboardData">
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef> Name </th>
      <td mat-cell *matCellDef="let element"> {{element.name}} </td>
    </ng-container>
    <ng-container matColumnDef="totalScore">
      <th mat-header-cell *matHeaderCellDef> Total Score </th>
      <td mat-cell *matCellDef="let element"> {{element.totalScore}}</td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

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

tr.mat-row {
    background: #2f5b98; /* Old browsers */
    background: -moz-linear-gradient(top, rgba(74,144,239,1) 20%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(74,144,239,1) 20%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(74,144,239,1) 20%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4a90ef', endColorstr='#000000',GradientType=0 ); /* IE6-9 */

    margin-top: 16px;
    padding: 8px;
    border: 1px solid #FAFF00;
}

Я уверен, что это что-то простое,но я не могу понять, что мешает мне применить эти стили к ряду.Опять же, я могу изменить фон, шрифт внутри него и некоторые другие стили, но не эти три конкретных стиля (padding, margin, border).

РЕДАКТИРОВАТЬ: с тех пор я определил, что отступы и поля не допускаютсяна любых таблицах HTML.Граница все еще ускользает от меня.

Answer 1

  mat-footer-row, mat-header-row, mat-row {
    border-bottom-width: 10px;
  }

попробуйте этот код.Это будет работать :)

Answer 2

Самый простой и лучший способ - использовать силу углового материала.Используйте mat-table, mat-header-cell, mat-cell вместо table, th, td.В конце используйте mat-header row и mat-row вместо th и td.Затем вы можете ограничить каждую строку по своему усмотрению.

Live Пример: Stackblitz

Answer 3

Ваши проблемы со стилем не связаны с таблицами Angular Material, а с таблицами HTML в целом.Если вы ищете, как стилизовать table, например, добавить границы для строк или полей, вы найдете различные ответы и предложения.

Вы не можете добавить margin или padding в строку таблицы <tr> напрямую.

margin применяется ко всем элементам, кроме элементов с типами отображения таблицы, отличными от заголовок таблицы , таблица и встроенная таблица .

padding применяется ко всем элементам, кроме table-row-group , table-header-группа , группа-нижний колонтитул , строка-таблица , группа-столбец-таблица и столбец-таблица.

Решения

Как установить border для строк таблицы и указать margin и padding в зависимости от модели границы (collapse или separate)Вы используете.

Модель разделенных границ: border-collapse: seperate

В модели разделенных границ края совпадают с краями границ ячеек.(И, таким образом, в этой модели могут быть промежутки между строками, столбцами, группами строк или группами столбцов, соответствующие свойству 'border-spacing'.)

В этой модели каждая ячейка имеет отдельныйграницы.Свойство border-spacing определяет расстояние между границами соседних ячеек.(...) Строки, столбцы, группы строк и группы столбцов не могут иметь границ (т. Е. Пользовательские агенты должны игнорировать свойства границ для этих элементов).

1.Решение: Если вы хотите border , margin и padding , вы можете сделать что-то вроде этого:

td.mat-cell {
 /* row padding */
 padding: 16px 0;
 /* row border */
 border-bottom: 1px solid #ffa600;
 border-top: 1px solid #ffa600;
}

td.mat-cell:first-child {
  /* row border */
  border-left: 1px solid #ffa600;
}

td.mat-cell:last-child {
  /* row border */
  border-right: 1px solid #ffa600;
}

table {
  /* row spacing / margin */
  border-spacing: 0 8px !important;
} 

https://stackblitz.com/edit/angular-cjxcgt-wtkfg4

Модель сворачивающихся границ: border-collapse: collapse

Края строк, столбцов, групп строк и групп столбцов в модели сворачивающихся границ совпадают сгипотетические линии сетки, на которых сосредоточены границы ячеек.(И, таким образом, в этой модели строки вместе точно покрывают таблицу, не оставляя пробелов; то же самое для столбцов.)

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

2.Решение: Если вам нужна только строка border и padding , но между строками не должно быть пробелов / полей:

table {
  border-collapse: collapse;
}

th {
  /* row border */
  border-bottom: 1px solid #ffa600;
}

td.mat-cell {
  /* row padding */
  padding: 20px 0;
  border: none;
}

tr.mat-row {
  /* row border */
  border: 1px solid #ffa600;
}

https://stackblitz.com/edit/angular-cjxcgt-xphbue