Как добавить радиус границы к angular матовой таблице?

Question

Я пытаюсь сделать границу mat-table круглой. Но это не работает. Пробовал это -

table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 1em;
}

Как этого добиться?

Answer 1

проблема в том, что вам нужно переопределить цвет фона таблицы матов:

.mat-table
{
  background-color:transparent!important;  
}
table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 5em;
}
table tr:last-child td /*To remove the last border*/
{
  border-bottom:0 solid
}

stackblitz

Answer 2

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

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

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

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

Решения

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

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

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

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

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

   td.mat-cell {/ * padding / padding: 16 пикселей 0; / граница строки * / border-bottom: 1px solid # ffa600; border-top: 1px solid # ffa600; }

   td.mat-cell: first-child {/ * граница строки * / border-left: 1px solid # ffa600; }

   td.mat-cell: last-child {/ * граница строки * / border-right: 1px solid # ffa600; }

   table {/ * межстрочный интервал / margin * / border-spacing: 0 8px! Важный; }

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

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

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

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

table {border-collapse: collapse; }

th {/ * граница строки * / border-bottom: 1px solid # ffa600; }

td.mat-cell {/ * отступ строки * / отступ: 20px 0; граница: нет; }

tr.mat-row {/ * граница строки * / border: 1px solid # ffa600; }

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

Answer 3

Если вы хотите, чтобы оно было во всем приложении, просто добавьте его в свой основной css с ! Важным , как следует

.mat-table {
  width: 100% !important;
  border-collapse: collapse !important;
  border-radius: 1em !important;
}

или, если это не работает, есть другой способ использования /deep/ Или :: глубокий

, хотя это не лучшая практика и не рекомендуется, но решает цель