Lightning Combo box overflowing outside table column

Question

I have added a combobox in lwc using table structure and it is overflowing to the next column. Below is the code I used.

  <table class="slds-table slds-table_cell-buffer slds-table_bordered">
            <thead  class="slds-line-height_reset">
                <tr>
                <th  scope="col">
                    <div class="slds-truncate">Asset Type</div>
                    <div> <template if:true={assetTypeValues.data}>
                        <lightning-combobox name="progress"  placeholder="Choose on"
                            options={assetTypeValues.data.values} onchange={handleChange}>
                        </lightning-combobox>
                    </template></div>
                </th>
            </tr>
             </thead>
 </table>

Can anyone help? Note: I need to display 15 columns using table structure and hence went with html table.

After applying the css the values are truncated as below

Answer 1

The lightning-combobox component uses the class .slds-dropdown_fluid to set the dropdown width using the variable --lwc-sizeXSmall which has a default value of 12rem.

Custom CSS can be used to overwrite this value as required.

<lightning-combobox
  class="combobox-custom-width"
  name="progress"
  placeholder="Select"
  options={options}
>
</lightning-combobox>

.combobox-custom-width{
    --lwc-sizeXSmall: 8rem;
}

Answer 2

<lightning-combobox class="combobox-custom-width" name="progress" placeholder="Select" options={options} style="width:320px;"

Please check it its working.