[Table] Make --table-col-max-width really work

[kiaking]

When creating a table, there're many cases where we wanna set the first column to "Set the min width, but fill up empty space if there's any". For this reason, we have --table-col-max-width. However, this only works if the content size is smaller than the min-width. Here is the broken example.

For this example, the first column has following css defined.

.table :deep(.col-name) {
  --table-col-width: 160px;
  --table-col-max-width: 100%;
}

With this definition, I wand the column to have min of 160px, but if the window is large, then fill up the rest of the space. Similar to how flex-grow: 1 would work.

Currently --table-col-max-width sets the max width to 100%. So, if the content is larger than 160px (min width), it just gets bigger.

The hard part is that the table can be overflow. If there're lots of column, then it should exceed the table width and should be horizontally scrollable.

Is there a way to achieve this?