Angular Material ng-tns class changes margin of items in my table, can use CSS to change the margin but then another variant of ng-tns is applied?

Question

I have an angular project where I'm using Angular Material and material table.

It seems that all the text in my table has the 10px margin top and bottom applied due to a class named something like: .ng-tns-c5-1 or .ng-tns-c6-1 etc.

I can't find a way to change those margins without inspecting element, finding that class and then using CSS to change that margin.

But after some changes to other elements on the app, the .ng-tns-c6-1 (for example) is changed to something like: .ng-tns-c4-0 and then I have to change that. The problem is I've done this 5-6 times now and it's a complete pain.

Because of that the table has a lot of useless white space and just overall makes things look bad.

What is that class and what can I do to make sure the margin remains at the 2-3px I'm setting?

This is the type of thing I have in my CSS:

.ng-tns-c5-1 {
  margin-top: 2px !important;
  margin-bottom: 2px !important;
}

.ng-tns-c5-0 {
  margin-top: 2px !important;
  margin-bottom: 2px !important;
}

.ng-tns-c6-1 {
  margin-top: 2px !important;
  margin-bottom: 2px !important;
}

.ng-tns-c4-0 {
  margin-top: 2px !important;
  margin-bottom: 2px !important;
}

Answer 1

You can use the following to select all the current and future elements.

[id*='ng-tns-c'] {

}