el table 宽度根据内容自适应并且内容宽度没有表头宽就按表头宽度

您可以使用CSS中的`table-layout`属性来控制表格的宽度自适应和表头宽度。

要使表格宽度根据内容自适应，可以将`table-layout`属性设置为`auto`，如下所示：

table {
  table-layout: auto;
}

要使内容宽度没有表头宽就按表头宽度，可以将`table-layout`属性设置为`fixed`，并将表头单元格的宽度设置为固定值，如下所示：

table {
  table-layout: fixed;
}

th {
  width: 100px; /* 设置表头单元格宽度为固定值 */
}

请注意，如果表格中的内容超过了单元格宽度，它将自动换行。如果您不希望内容换行，可以将单元格的`white-space`属性设置为`nowrap`，如下所示：

td {
  white-space: nowrap;
}

相关问题

el-table宽度根据内容自适应

你可以使用 `width="auto"` 属性实现el-table宽度根据内容自适应：

<el-table :data="tableData" width="auto">
  ...
</el-table>

另外，如果你想要固定表头，可以使用 `fit` 和 `height` 属性：

<el-table :data="tableData" width="auto" :fit="true" :height="400">
  ...
</el-table>

这样就可以实现el-table宽度根据内容自适应，并且固定表头的效果。

设置vue中的el-table表头自适应宽度

要设置Vue中的`el-table`表头自适应宽度，可以使用`fit`属性和`width`属性。

使用`fit`属性可以让表格自动调整宽度以适应容器，如下所示：

<el-table :data="tableData" :fit="true">
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
</el-table>

使用`width`属性可以设置表头的宽度，如下所示：

<el-table :data="tableData">
  <el-table-column prop="name" label="姓名" width="100"></el-table-column>
  <el-table-column prop="age" label="年龄" width="100"></el-table-column>
  <el-table-column prop="address" label="地址" width="200"></el-table-column>
</el-table>

同时使用`fit`属性和`width`属性可以让表格自适应容器并设置表头的宽度，如下所示：

<el-table :data="tableData" :fit="true">
  <el-table-column prop="name" label="姓名" width="100"></el-table-column>
  <el-table-column prop="age" label="年龄" width="100"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
</el-table>

这样设置后，表格会自适应容器的宽度，并且姓名和年龄列的宽度固定为100px，地址列的宽度自适应。