How to add cssDefault.width Annotation in SAP UI5

cssDefault.width annotation is used to define the width of the Column in SAP UI5 Table. The CDS View annotation for width looks like below. It is part of the lineItem Annotation as seen below.

@UI.lineItem:[{position:1,  importance:#MEDIUM,  cssDefault.width:  '10rem'}]
Name as CustomerName,
@UI.lineItem:[{position:2,  importance:#MEDIUM,  cssDefault.width:  '7rem'}]
Id as CustomerId,

The above CDS View UI Annotation will generate the below annotations in the Metadata

                    <Annotations Target="CustomerNamespace.CustomerType"
                       xmlns="http://docs.oasis-open.org/odata/ns/edm">
                        <Annotation Term="com.sap.vocabularies.UI.v1.LineItem">
                            <Collection>
                                <Record Type="com.sap.vocabularies.UI.v1.DataField">
                                    <PropertyValue Property="Value" Path="Name" />      
                                    <Annotation Term="com.sap.vocabularies.HTML5.v1.CssDefaults">
                                        <Record>
                                            <PropertyValue Property="width" String="10rem" />
                                        </Record>
                                    </Annotation>
                                </Record>                                 
                                <Record Type="com.sap.vocabularies.UI.v1.DataField">
                                    <PropertyValue Property="Value" Path="Id" /> 
                                   <Annotation Term="com.sap.vocabularies.HTML5.v1.CssDefaults">
                                        <Record>
                                            <PropertyValue Property="width" String="7rem" />
                                        </Record>
                                    </Annotation>                                        
                                </Record>                                 
                            </Collection>
                        </Annotation> 
                    </Annotations>    

The above annotations in the metadata will generate and render the below SAP UI5 Smart table with speficied column width dimentions for the column Name and Id

Important: tableType Property of the Smart Table must be Grid Table/Tree/Analytical in order to see the effect of the Width Annotation. If the tableType is set to Responsive, then the effect of the Width Annotation will not be visualized. As seen in below picture, the tableType is Grid Table, therefore the width Annotations are easily realized.

        <core:View xmlns:core="sap.ui.core" controllerName="initialView.controller"
            xmlns="sap.m"
            xmlns:table="sap.ui.table"
            xmlns:smart="sap.ui.comp.smarttable"
            xmlns:customData="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1"
            height="100%">
            <Page id="page1" title="Customers1">
               <VBox fitContainer="true">
                   <smart:SmartTable id="smartTable1" entitySet="CustomerSet" 
                       tableType="Table"
                       showFullScreenButton="true" header="Customers" showRowCount="true"
                       editTogglable="true"
                       customData:useSmartField="true"
                       useTablePersonalisation="true"
                       enableAutoBinding="true">
                   </smart:SmartTable>
               </VBox>
            </Page>
        </core:View>

For example, if the tableType=”ResponsiveTable” is set in the Smart Table properties, then the Width Annotations will have no effect on the Smart Table like below. As the Responsive Table are Row based selection, it will not have any influence. But the Grid Table are based on cell based selection. Therefore the width Annotation will have influence on the Grid Table.