Html CSS表格列最小宽度等于文本大小

我有一个简单的HTML表，如下所示

这是一个有响应的表，当浏览器收缩时，它会向下收缩

我想将列的最小宽度设置为与标题文本一样宽

在CSS中实现这一点的最佳方法是什么

       <table>
       <thead class="ui-datatable-thead">
           <tr class="ui-state-default">
               <th class="ui-state-default">COL HEADER</th>
           </tr>
       </thead>
       <tbody class="ui-datatable-data ui-widget-content">
          <tr class="ui-widget-content ui-datatable-odd">
              <td>DATA</td>
          </tr>
       </tbody>
       </table>

列标题
资料

我看了一些其他的答案，但还没有找到解决办法。

表格{
显示：表格；
宽度：100%；
表布局：固定；
边缘底部：20px；
}
th，td{
显示：表格单元格；
边框：1px点红色；
填充：4px6px；
宽度：2%；
页边距底部：0；
}

列标题1
列标题2
列标题3
数据1
数据2
数据3

您需要固定标题的TD大小。所以身体的TD将自动采用标题TD中应用的宽度。

看看这里，也许这有帮助，谢谢。如果我不知道列宽，但希望将其设置为标题文本的宽度，该怎么办？