How to control LWC styling dynamically?

You can use a template if:true={property} expression to show different divs based on logic.

Here's a trailhead tutorial.

Another example:

<template if:false={moveToNextPage}>
    <div class={tableClass}>

    </div>
</template>

---

  @api
    controlTableOff() {
        this.tableClass = 'slds-hide';
    }

The obvious solution is to stop using fixed width (you use 66rem) and to use min/max widths plus a standard width of 100% which will try to fill the width of the container by default.

You can use flexipageRegionWidth.

Make a Component Width-Aware

When you add a component to a region on a page in the Lightning App Builder, use @api flexipageRegionWidth to pass the region’s width to the component. Then with some strategic CSS, you can tell the component to render in different ways in different regions at run time.

Valid CSS class values are SMALL, MEDIUM, and LARGE

JS:

import { LightningElement, api } from 'lwc';

export default class TestClass extends LightningElement {
    @api flexipageRegionWidth = 'CLASSIC'; // default to classic. If its lightning, framework will set the value
}

HTML:

<template>
   <div class={flexipageRegionWidth}>
       <datatable>
   </div>
</template>

CSS:

div .CLASSIC {
    width: 66rem;
    ...
}
div .LARGE {
    width: 40rem;
    ...
}
div .SMALL {
    width: 15rem;
    ...
}