如何使 HTML 表格中的一列缩小以适应？

Posted 2023-03-05

【中文标题】如何使 HTML 表格中的一列缩小以适应？

【英文标题】：How to make one column in an HTML table shrink-to-fit?

【发布时间】：2021-03-22 03:08:02

【问题描述】：

我有一个使用 Bootstrap 4.5 框架的网站。我正在尝试创建一个表，其中第一列自动适合其内容。例如，如果内容需要 100px，那么第一列的 with 就是 100px。其余列将占用其余空间。

我尝试在第一列创建带有 col-auto 类的 html 表格，但没有成功。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<table class="table table-striped">
  <tbody>
    <tr>
      <td class="col-auto">First Column</td>
      <td>Second Column</td>
    </tr>
  </tbody>
</table>

如何使第一列适合内容大小。

【参考方案1】：

.table td 
  width: fit-content;

【参考方案2】：

使用引导程序，您可以使用 col-X 类将大小重置为表格宽度的 12 分之一。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<table class="table table-striped">

  <tbody>
    <tr>
      <td class="col-2">First Column</td>
      <td class="col-10">Second Column</td>
    </tr>
  </tbody>
</table>

or

<table class="table table-striped">

  <tbody>
    <tr>
      <td >First Column</td>
      <td class="col">Second Column</td>
    </tr>
  </tbody>
</table>

【讨论】：

就我而言，我真的做不到。该表可以有超过 12 列。我只想让第一列适合内容。就我而言，我的第一列总是很小。我尝试使用col-auto，但似乎没有任何影响。