如何创建具有自动宽度的表div？

要创建具有自动宽度的表div，您可以使用以下步骤：

创建HTML结构：使用<div>元素作为表的容器，并设置其样式为display: table以将其作为表布局进行处理。在该<div>中，添加一个<div>作为表的行容器，使用display: table-row样式。然后，在行容器中添加多个<div>元素作为单元格，使用display: table-cell样式。

示例代码：

<div style="display: table;">
   <div style="display: table-row;">
      <div style="display: table-cell;">单元格 1</div>
      <div style="display: table-cell;">单元格 2</div>
      <div style="display: table-cell;">单元格 3</div>
   </div>
</div>

设置表的宽度：为了实现具有自动宽度的表，您可以使用table-layout: auto样式来设置表的宽度根据内容自动调整。将此样式应用于表容器(<div>元素)。

示例代码：

<div style="display: table; table-layout: auto;">
   <div style="display: table-row;">
      <div style="display: table-cell;">单元格 1</div>
      <div style="display: table-cell;">单元格 2</div>
      <div style="display: table-cell;">单元格 3</div>
   </div>
</div>

设置表格样式：根据需要，您可以添加其他样式来美化表格，例如设置单元格的边框、背景颜色等。

示例代码：

<div style="display: table; table-layout: auto;">
   <div style="display: table-row;">
      <div style="display: table-cell; border: 1px solid black; padding: 5px;">单元格 1</div>
      <div style="display: table-cell; border: 1px solid black; padding: 5px;">单元格 2</div>
      <div style="display: table-cell; border: 1px solid black; padding: 5px;">单元格 3</div>
   </div>
</div>

以上是创建具有自动宽度的表div的基本步骤。根据具体需求，您可以进一步调整样式和布局。