[SalesForce] Freeze first column in the lightning data table lwc

How to freeze the first column vertically of the Lightning Data Table LWC ?

Since LWC is enforcing the shadow DOM style scoping.
I have encapsulated the LWC component inside an Aura component and put the CSS targeting inner elements in the CSS file of that aura component. Because Aura components do not enforce strict CSS encapsulation so that CSS will apply.
But it is not actually working.

Any help on this will be appreciated.

Below is the code :

dataTable.html

<template>
  <div style="height: 300px;" class="slds-scrollable">
    <lightning-datatable
      key-field="id"
      data={data}
      columns={columns}
      hide-checkbox-column
    >
    </lightning-datatable>
  </div>
</template>

dataTable.js

import { LightningElement, track } from "lwc";

const columns = [
  { label: "Label", fieldName: "name", fixedWidth: 200 },
  { label: "Website", fieldName: "website", type: "url", fixedWidth: 200 },
  { label: "Phone", fieldName: "phone", type: "phone", fixedWidth: 200 },
  { label: "Balance", fieldName: "amount", type: "currency", fixedWidth: 200 },
  { label: "CloseAt", fieldName: "closeAt", type: "date", fixedWidth: 200 }
];

export default class DataTable extends LightningElement {
  @track data = [];
  @track columns = columns;
  async connectedCallback() {
    this.data = [
      {
        name: "Arvel Gorczany",
        email: "Sanford3@gmail.com",
        website: "https://elvie.info",
        amount: "440.08",
        phone: "178-902-8367 x048",
        closeAt: "2020-04-30T22:45:45.398Z",
        id: "d38ab4ae-27c8-4682-b925-433e43a7b6b7"
      },
      {
        name: "Euna Harber",
        email: "Kiley_Schmitt45@yahoo.com",
        website: "http://ubaldo.name",
        amount: "40.60",
        phone: "043-315-3894 x8413",
        closeAt: "2020-07-31T19:01:27.026Z",
        id: "c4c6bff8-439c-4575-ae3a-aeee1a90f421"
      },
      {
        name: "Salvador Watsica",
        email: "Laverna.Wilkinson@hotmail.com",
        website: "http://hosea.com",
        amount: "593.88",
        phone: "1-784-392-8412 x542",
        closeAt: "2020-05-28T04:11:36.195Z",
        id: "bfe2f084-88a4-4bcb-8e25-7336f656122b"
      },
      {
        name: "Salvatore Rogahn",
        email: "Nickolas61@hotmail.com",
        website: "https://quentin.org",
        amount: "950.78",
        phone: "831-213-2597 x473",
        closeAt: "2020-06-10T09:05:45.183Z",
        id: "a85bbee4-688e-4d3d-a91e-71570de98be3"
      }
    ];
  }
}

DataTableWrapper.cmp

<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
    <c:dataTable></c:dataTable>
</aura:component>

DataTableWrapper.css

.THIS table tr td:first-child {
    position:fixed;
    z-index: 1
}