CSS表格可滚动，包含最小宽度的项目

Question

我制作了一个表，它有固定数量的列(5(、每列的标题(固定行(和动态数量的行。

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

如果我尝试span { min-width: 100px }，它会使父div与页面的其余部分一起展开，即使我将其最大宽度固定为div { max-width: 100% }，也不会被折叠。我尝试过min-width、width、max-width的许多组合，但似乎没有一个能让它做出反应。有什么方法可以让它与这个设计配合使用吗？

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

要使表可滚动，您应该向.component表添加溢出：auto。此外，要设置单元格的最小大小，您可以更新以下代码：

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

这意味着："；创建5列，最小大小-最小单元格宽度宽度，如果不存在，则创建100px，最大值为1fr；。

要使每行的边界达到全宽，我们应该使用适合内容：

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>