CSS table 最小宽度项目可滚动

Question

我制作了一个 table，它具有固定的列数 (5)、每列的标题（固定行）和动态的行数。

当我尝试让我的应用响应时，我希望每行的 span 或项目有一个 min-width（对所有人都一样）并且能够水平滚动而 parent div 与页面的其余部分保持相同的宽度。

如果我尝试 span { min-width: 100px }，它会使 parent div 与页面的其余部分一起扩展，即使我将其最大宽度固定为 div { max-width: 100% }，并保持不变不可滚动。我尝试了 min-width、width、max-width 和 none 的许多组合，似乎可以使其响应。有什么方法可以让它与这个设计一起工作吗？

HTML:

<div class="component-table">
  <div class="component-row-title">
    <span class="component-item-title"></span>
    <span class="component-item-title"></span>
    <span class="component-item-title"></span>
    <span class="component-item-title"></span>
    <span class="component-item-title"></span>
  </div>
  <div v-for="(item, index) in list" :key="index" class="component-row">
    <span class="component-item"></span>
    <span class="component-item"></span>
    <span class="component-item"></span>
    <span class="component-item"></span>
    <span class="component-item"></span>
  </div>
</div>
<div class="another-component">
  ...
</div>

CSS:

.component-table {
  display: flex;
  flex-direction: column;
}

.component-row-title {
  padding: 0.5em 1em;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  font-size: 16px;
  border-bottom: solid 1px #000000;
}

.component-item-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.component-row {
  padding: 0.75em 1em;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  font-size: 16px;
}

.component-row:not(:last-child) {
  border-bottom: solid 1px #000000;
}

.component-item {
  font-size: 14px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Answer 1

要使 table 可滚动，您应该将 overflow: auto 添加到 .component-table。此外，要设置单元格的最小大小，您可以更新此代码：

grid-template-columns: repeat(5, minmax(var(--min-cell-width, 100px), 1fr));

这意味着：“创建 5 列，最小尺寸为 --min-cell-width 宽度，如果不存在则为 100px，最大为 1fr”。

要使每一行的边框全宽，我们应该使用fit-content:

width: fit-content;

查看代码片段了解更多详情。我在 CSS 部分添加了评论。

:root {
  --min-cell-width: 200px; /* css var for min cell width */
}

.component-table {
  display: flex;
  flex-direction: column;
  overflow-x: auto; /* make table scrollable */
}

.component-row-title,
.component-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(var(--min-cell-width, 100px), 1fr)); /* 5 columns with css varible size; 100px - fallback size */
  width: fit-content; /* set row width to effect on border size */
}

.component-row-title {
  padding: 0.5em 1em;
  border-bottom: solid 1px #000000;
  font-size: 16px;
}

.component-row {
  padding: 0.75em 1em;
  font-size: 14px;
}

.component-row:not(:last-child) {
  border-bottom: solid 1px #000000;
}

.component-item-title,
.component-item {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

<div class="component-table">
  <div class="component-row-title">
    <span class="component-item-title">t1</span>
    <span class="component-item-title">t2</span>
    <span class="component-item-title">t3</span>
    <span class="component-item-title">t4</span>
    <span class="component-item-title">t5</span>
  </div>
  <div class="component-row">
    <span class="component-item">1</span>
    <span class="component-item">2</span>
    <span class="component-item">3</span>
    <span class="component-item">4</span>
    <span class="component-item">5</span>
  </div>
  <div class="component-row">
    <span class="component-item">1</span>
    <span class="component-item">2</span>
    <span class="component-item">3</span>
    <span class="component-item">4</span>
    <span class="component-item">5</span>
  </div>
  <div class="component-row">
    <span class="component-item">1</span>
    <span class="component-item">2</span>
    <span class="component-item">3</span>
    <span class="component-item">4</span>
    <span class="component-item">5</span>
  </div>
</div>
<div class="another-component">
  ...
</div>

CSS table 最小宽度项目可滚动

CSS table scrollable with minimum width items

html

css

vue.js

nuxt.js