我已經閱讀了幾篇與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;
}

因此，它將隱藏所有其他領域，但那些包含散列類

解決辦法