How to apply some simple styles to tds of "datatable" of lightning web component in playground?

Question

Working in playground of lightning web components. I have following files and code:

basic.html

<template>
<div style="height: 300px;">
    <lightning-datatable
            key-field="id"
            data={data}
            columns={columns}>
    </lightning-datatable>
</div>    
</template>

basic.css

 td{
    background: red;
 }
 :host td{
    background: red;
   }

basic.js

import { LightningElement, track } from 'lwc';
import fetchDataHelper from './fetchDataHelper';

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

    export default class BasicDatatable extends LightningElement {
    @track data = [];
    @track columns = columns;

    async connectedCallback() {
        const data = await fetchDataHelper({ amountOfRecords: 100 });
        this.data = data;
    }
    }

When I look into developer tools > inspect it renders styles in a style tag and do not apply to the element:

<style type="text/css">
    td[c-basic_basic]{background: red;}
    [c-basic_basic-host] td[c-basic_basic]{background: red;}
 </style>

Link to the play ground I am working on

Answer 1

Have a look at the link to the playground i have made

https://developer.salesforce.com/docs/component-library/tools/playground/S6hzg24v4/116/edit

Inspired from https://sfdcfacts.com/lwc/color-columns-of-data-table-lwc/