我已经阅读了几篇与Stack Overflow上的table-layout属性相关的文章和问题，但是我还没有找到解决我的具体问题的解决方案。我被这个问题困扰了几个小时，所以我希望有人能给我指点迷津。

我有一个处理大量数据的表，通常比容器宽得多。为了允许水平滚动，我将容器设置为overflow-x: scroll。客户端能够定义每列的宽度。但是，一个新的需求出现了:如果没有明确定义宽度，客户希望表格自动将列宽调整到最小。

我在各种帖子中看到过一些建议，建议让最后一列有一个自动宽度。然而，在我的例子中，我需要将任何列设置为自动宽度的灵活性。

我考虑过将table-layout属性改为auto，因为我相信这可能是解决方案。然而，当我进行这种更改时，我的定制组件和性能会受到一点影响。所以我需要找到一个表格布局:固定的；解决方案。

这里有一小段可以说明这个问题。带有###的列应该有一个自动宽度，但目前，当我试图这样做时，它被隐藏在col 4后面。

.container {
  width: 400px;
  border: 1px solid red;
  overflow-x: scroll;
}

.container table {
  width: 100%;
  table-layout: fixed;
  text-align: left;
  border-collapse: collapse;
}

.container th,
.container td {
  border: 1px solid blue;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

<div class="container">
  <table>
    <colgroup>
      <col style="width: 50px;">
      <col style="width: 300px;">
      <!-- <col style="width: 50px;"> -->
      <col style="width: auto;">
      <col style="width: 100px;">
    </colgroup>
    <thead>
      <tr>
        <th>Columna 1</th>
        <th>Columna 2</th>
        <th>###</th>
        <th>Columna 4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Contenido 1</td>
        <td>Contenido 2</td>
        <td>###</td>
        <td>Contenido 4</td>
      </tr>
      <tr>
        <td>Contenido 5</td>
        <td>Contenido 6</td>
        <td>###</td>
        <td>Contenido 8</td>
      </tr>
    </tbody>
  </table>

</div>

表格布局:自动；——思想方向正确。为了设置单元格的特定宽度，请同时设置它们的最小宽度和最大宽度:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  width: 400px;
  border: 1px solid red;
  overflow-x: scroll;
}
table {
  width: 100%;
  border-collapse: collapse;
}

td {
  border: 1px solid blue;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 0;
  min-width: var(--width);
  max-width: var(--width);
}

td:nth-child(1) {
  --width: 50px;
}

td:nth-child(2) {
  --width: 300px;
}

td:nth-child(3) {
  --width: unset;
}

td:nth-child(4) {
  --width: 100px;
}

<div class="container">
  <table>
    <thead>
      <tr>
        <td>Columna 1</td>
        <td>Columna 2</td>
        <td>###</td>
        <td>Columna 4</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Contenido 1</td>
        <td>Contenido 2</td>
        <td>###</td>
        <td>Contenido 4</td>
      </tr>
      <tr>
        <td>Contenido 5</td>
        <td>Contenido 6</td>
        <td>###</td>
        <td>Contenido 8</td>
      </tr>
    </tbody>
  </table>
</div>

所以您需要做的就是将所需的列宽改为auto & ltcol style = & quot自动；"& gt并将类添加到# # # elements & lttd class = & quot哈希& quot& gt# # # & lt/TD & gt；至于CSS方面，您需要将CSS代码更改为:

.container th,
.container td:not(.hash) {
  border: 1px solid blue;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

因此，它将隐藏所有其他领域，但那些包含散列类

解决办法