Unable to make datatable responsive

Question

I've followed the steps listed in this article and added a grid to my layout, next I wrapped my datatable with <lightning-layout> and <lightning-layout-item> tags. but when I shrink the screen size the datatable stays the same.

I tried implementing this solution but the datatable stays the same and not shrinking.

What am I missing?

<template >
        <div class="slds-grid slds-gutters">
          <div class="slds-col">
            <lightning-layout>
              <lightning-layout-item size="12">
                <lightning-datatable
                  key-field="id"
                  data={data}
                  columns={columns}>
                </lightning-datatable>                  
              </lightning-layout-item>
            </lightning-layout>
          </div>
        </div>
</template>

Answer 1

In this case, it's probably easiest to just add a single class to a datatable without any surrounding markup. Like this:

<template>
  <lightning-datatable key-field="id" data={data} columns={columns} class="slds-max-medium-table_stacked">
  </lightning-datatable>
</template>

Playground here