I have a table which table-layout is auto as I want all the table columns should take space according to its content while first load, however I don't want column width change if the content is change of the table. The actual scenario is, the table-header is clickable and clicking on it - it sort the table content based on that column asc/dsc order. Each time sort happen the data come from server based on the full list of data and in the table I am showing first 20 rows of that data. Therefore, each time sort happen completely new data coming. In this case even the data is changing I don't want my table should change column width. So my table should keep the same column width when loaded first time.

I have option to use table-laout fixed but it will keep all the columns same width which I dont want. What I want is, my table-layout should be auto at initial load and afterwards it become fixed even there is content change. Is there any way to change the table layout dynamically after the first load in Typescript or Javascript? or using css we can achieve this?