How to make buttons in a lightning-datatable smaller in LWC?

Thanks to Wei Ni's answer (do upvote that), I think I now better understand what is going on.

I have been adding this CSS to my component:

.scaled-down button {
    transform: scale(0.75);
}

which outputs this into the resulting HTML page:

<style type="text/css">
.scaled-down[cvnp-claims_claims] button[cvnp-claims_claims] {
    transform:scale(.75)
}
</style>

meaning this style only applies to elements that have an attribute named cvnp-claims_claims. That attribute name is added by LWC to many elements output directly by my component e.g.:

<lightning-card cvnp-claims_claims>
    ...
    <lightning-datatable cvnp-claims_claims>
        ...

but in this case, not the buttons (or any other cell content) that is output by the lightning-datatable:

<lightning-button class="scaled-down">
    <button name="viewDetails" title="View Details" type="button" class="slds-button slds-button_brand">View Details</button>
</lightning-button>

I presume this is by design, but it is not helpful for my case...

The cleanest way to go, I think, is to pass in the style in the column definition:

{
    type: "button",
    fixedWidth: 150,
    typeAttributes: {
        label: 'View Details',
        title: 'View Details',
        name: 'viewDetails',
        value: 'viewDetails',
        variant: 'brand'
    },
    cellAttributes: {
        style: 'transform: scale(0.75)'
    }
}

so it is output like this:

<td role="gridcell" style="transform: scale(0.75);">

which works. Inserting some CSS that is not qualified by the attribute somehow would be another approach. But note that you get this error if you attempt to add style directly in the template:

The element is disallowed inside the template. Please add css rules into '.css' file of your component bundle.

Incidentally, while I'm now getting the styling applied, it is not quite right yet as the buttons are scaled-down but the row height is unchanged... But that is a CSS challenge - unsolved at present - not a LWC problem.

PS

See How to escape lightning CSS scoping for adding CSS not qualified an attribute.

I haven't tried it myself, but if this can get background color working, it should work for the size as well.

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

Basically, what it does is adding class attribute as part of cell attributes then manually assign class to it when define data.

{label: ‘Diet Type’, fieldName: ‘diet’, type: ‘text’, cellAttributes: { class: { fieldName: ‘dietCSSClass’ }}},
{diet : ‘Vegeterian’, dietCSSClass : ‘diet-veg’}

This will create a row in the data table with cell value as “Vegeterian”. Also you can have the definition of the class “diet-veg” in the CSS file of your component which will be applied to this cell.

.diet-veg{
background : yellowgreen;
}

Just did sth myself out of curiosity, in case the class cell attribute is not working, I replace it with Style and in the data column, I directly specify the style I want to, seems working as expected.

Example:

{label: 'Working', fieldName: 'working', type: 'boolean', cellAttributes: { style: { fieldName: 'workingCSSClass' }}}

data.push({working : true, workingCSSClass : 'background:black'});