css 有一个中间列与自动宽度，而使用表格布局固定

wbgh16ku 于 2023-05-30 发布在其他

关注(0)|答案(2)|浏览(145)

我已经阅读了几篇关于Stack Overflow上的table-layout属性的文章和问题，但我还没有找到解决我的特定问题的解决方案。我在这个问题上被卡住了几个小时，所以我希望有人能给我指明正确的方向。
我有一个处理大量数据的表，通常比容器宽得多。为了允许水平滚动，我将容器设置为overflow-x：滚动。客户端能够定义每列的宽度。但是，出现了一个新的要求：如果没有明确定义宽度，则客户端希望表自动将列宽调整到所需的最小值。
我在各种帖子中遇到过建议，建议将最后一列保留为自动宽度。但是，在我的例子中，我需要灵活地设置任何列的自动宽度。
我已经考虑过将table-layout属性更改为auto，因为我相信这可能是解决方案。但是，当我进行此更改时，我的自定义组件和性能会受到一些影响。所以我需要找到一个table-layout: fixed;的解决方案。
这里有一个小片段来说明这个问题。带有###的列应该有一个自动宽度，但目前，当我尝试这样做时，它被隐藏在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>

css

来源：https://stackoverflow.com/questions/76343711/having-a-middle-column-with-auto-width-while-using-table-layout-fixed

2条答案

按热度按时间

bt1cpqcv1#

table-layout: auto;-正确的思想方向。为了设置单元格的特定宽度，同时设置它们min-width和max-width：

* {
  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>

赞(0）回复(0）举报 2023-05-30

to94eoyn2#

所以你需要做的就是将所需的列宽更改为auto <col style="auto;">，并添加一个类到### elements <td class="hash">###</td>，在CSS方面，你需要将CSS代码更改为：

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

因此，它将隐藏所有其他字段，但那些包含哈希类
Solution

赞(0）回复(0）举报 2023-05-30

我来回答

css 有一个中间列与自动宽度，而使用表格布局固定

2条答案

相关问题

热门标签

最新问答