Here is an example I'm working with: https://stackblitz.com/edit/js-ivvupc?file=index.html
I need my table to be responsive, meaning it should become scrollable when the window size is reduced. The basic setup for this is already in place within the outer div:
<div style="width: 80%; height: 50%; overflow: auto">
The main issue I am facing is as follows: Each column currently has a different width specified in percentage. Additionally, the second column 'State' needs to have a minimum width assigned if the window size becomes too small. In other words, if the window is large enough, utilize a width of 25%, otherwise set a min-width of 75px. When the table, especially with the fixed 75px wide 'State' column, becomes too big, it should horizontally scroll.
To summarize: If the window size permits, use the specified column widths in percentage. If the window size is insufficient, display a scrollable table with the 'State' column having a fixed width of 75px.
I attempted to achieve this using the following code, but unfortunately, it did not work as expected:
<th style="width: 25%; min-width: 75px">
<div>State</div>
</th>