feat(MatTable): Bottom border on row (instead of cell)

[angelaki]

Feature Description

It is actually more like a discussion but I'd like to share my experience with the border being part of the cell (instead of the row). Coming from the pre MDC components where it was part of the row, I needed to adopt my styles a bit. And now I'm struggeling over and over with this decision so I wanted to start a discussion about it's pros and cons ... maybe it's not too late.

Just to make sure. I'm only using the flex-version and most of my issues probably only occure here. But that gives me much more styling possibilities I rely on.

There are two main reasons that are a pain imho having the border being part of the cell:

1. Since the cell needs to start left-most at the table, you are not able to put margins to the cells. Otherwise you would have an offset of the border. I guess that's the reason you put the style box-sizing: border-box to the cells. Now that doesn't work with fixed sized columns! If I want to have a column with a fixed sized, I usually put flex: 0 0 100px; on it. But since these 100px are including the padding now, my cells have a different width if they are put in the first or second place in the table (https://stackblitz.com/edit/386up7zg). So I needed to set it back to content-box what brings me into new problems here and there.
2. If I only use columns of a fixed size, the border won't fit the row. The often happens to me if I use multi row templates with a detail only showing a small content (https://stackblitz.com/edit/386up7zg-wtqwvqh9). Sure I could make it auto increase but I use dynamic tables where the useer can place the columns dynamically. And some of them (e.g. columns containing only icons) have a fixed size. If the user puts super much columns on the detail-row, I let them wrap (since they don't provide the column headers). If they wrap, I have a super ugly bottom border and there is no easy way in Css to address only the last wrapped items.

Plus: how about giving the table a display: grid by default? I'm thinking about it, but don't want to move to far from your style to keep compatibility. The reason is I'd like to have a fixed sized primary row and a detail row always matching it's size. But I don't know how to do it with the container being a block (https://stackblitz.com/edit/rpgh7hwj-wtsobk5b).

Now coming to the pros of it ... Yeah, one could have different borders on the cells. Like ... different thicknesses? Or colors? Have you ever seen this out there? Imho this use-case is so niche that one really needing this behavior should rather turn of the row's border and go with a custom cell-border himself.

Thank you so much for your effort!

Edit: just checked and noticed that the border actually always was part of the cells (at least since version 8) so there probably is a good reason for it. Not sure why I noticed it with the swap to MDC, guess it was some other style-related thing and I thought it was the border (double-checked: it was the padding change of the flex table that made me aware of it). Never the less my question / idea is still relevant now.