当我从表中删除行时，页脚继续向上移动

Question

嘿大家，所以我在我的网站上有一个页面，它显示了一个表中供应和需求信息的列表，我有一个按钮，每一行删除一行数据。但我每次删除一行页脚移动页面,当我删除所有的行数据所以没有离开只是显示了表标题没有行。但我想让页脚留在底部，而且我仍然想显示行，即使没有数据，但只有一个空行。我该怎么做呢?这是我的代码，但它不工作:

<TableStyle>
<THead quiet={quiet}>
<tr>
{keysToRender.map((item, i) => (
<Th key={i}>
{customKeyNames[item] ? customKeyNames[item] : item}
</Th>
))}
{buttons &&
buttons.map((item, i) => <Th key={i}>{item.tableHeader}</Th>)}
{icons && icons.map((item, i) => <Th key={i}>{item.tableHeader}</Th>)}
</tr>
</THead>
<TBody quiet={quiet}>
{data &&
data.map((row, i) => (
<Tr key={i} order={i} quiet={quiet}>
{data.length === 0 && <Td>-</Td>}
{keysToRender.map((item, i2) => (
<Td order={i2} divider={divider} key={i2}>
{row[item]}
</Td>
))}

这是它看起来像当没有数据表中:输入图像描述这里

表中的数据是这样的:

输入图片描述

我给表格周围的div添加了最小高度300px但是当有很多行时仍然存在问题所以我需要分页但是我怎么做呢?

Answer 1

很难理解你的页面到底是什么样子的。如果我正确理解了你的问题，你需要让内容可成长。

<div class='page'>
<div class='content'>
...
</div>
<div class='footer'>
...
</div>
</div>

// styles
.page {
display: flex;
flex-direction: column;
}
.content {
flex-grow: 1;
}

'content' -这是你的表