How to deal with object widths in responsive environments

I've just designed a widget - it's a data table with 3 fairly narrow columns. It looks good on mobile and desktop.

On mobile (portrait), it takes up the full width, while on desktop, it uses 50% of the space at 12 column, which is dictated by a grid system.

However, there are "in between" widths where there's not enough space to squeeze in another column but the table becomes too wide and the columns too far apart - for instance just before 8 column breakpoint (599px).

Anyone got any ideas to throw into the pot as to how handle the table as these badly fitting widths?