桌表格高度自适应高度， 不再局限于 table 只能固定死的宽度！

如何解决表格数据超出屏幕高度的烦恼：Ant Table 高度自适应和滚动条设置指南

在数据统计和展示表格数据时，我们经常遇到一个棘手的问题：表头和表格数据超出屏幕高度的限制，无法在不滚动的情况下同时查看。这会大大降低数据查看的效率和便利性。使用 Ant Design 的 <a-table></a-table> 组件，我们可以轻松解决这一问题。

设置 Table 高度自适应屏幕高度

为了让表格高度自适应屏幕高度，我们需要使用 <a-table></a-table> 组件的 scroll 属性。scroll 属性可以接受多种不同的值，具体如下：

• scroll={{y: 'calc(100vh - 348px)'}}：将表格高度设置为屏幕高度减去 348px，适合大多数场景。
• scroll={{y: 400}}：将表格高度设置为固定值 400px。
• scroll={{y: '100%'}}：将表格高度设置为 100%，即与屏幕高度相同。
• scroll={{y: true}}：将表格高度设置为屏幕高度减去表头高度。

示例代码：

<a-table scroll={{y: 'calc(100vh - 348px)'}}>...</a-table>

设置 Table 内容滚动条

除了自适应高度，我们还可以使用 scroll 属性为表格添加水平或垂直滚动条。同样，scroll 属性也可以接受不同的值：

• scroll={{x: 'calc(100vw - 1200px)'}}：将表格宽度设置为屏幕宽度减去 1200px，避免表格内容过宽。
• scroll={{x: 800}}：将表格宽度设置为固定值 800px。
• scroll={{x: '100%'}}：将表格宽度设置为 100%，即与屏幕宽度相同。
• scroll={{x: true}}：将表格宽度设置为表格内容的宽度。

示例代码：

<a-table scroll={{x: 'calc(100vw - 1200px)'}}>...</a-table>

结论

通过使用 Ant Design 的 <a-table></a-table> 组件和 scroll 属性，我们能够轻松解决表格数据超出屏幕高度的问题。无论是自适应高度还是添加滚动条，都可以根据具体需求进行灵活设置，大大提高数据展示的效率和便利性。

常见问题解答

1. 如何让表头固定在页面顶部？

   可以使用 <a-table></a-table> 组件的 fixed 属性来固定表头，具体如下：

   <a-table fixed {...props}>...</a-table>
   

2. 如何设置表格的行高？

   可以使用 <a-table></a-table> 组件的 rowHeight 属性来设置行高，具体如下：

   <a-table rowHeight={48} {...props}>...</a-table>
   

3. 如何隐藏表格的分页控件？

   可以使用 <a-table></a-table> 组件的 pagination 属性来隐藏分页控件，具体如下：

   <a-table pagination={false} {...props}>...</a-table>
   

4. 如何让表格中的文字自动换行？

   可以使用 CSS 的 white-space: nowrap 属性来让表格中的文字自动换行，具体如下：

   .ant-table-cell {
     white-space: nowrap;
   }
   

5. 如何设置表格的背景色？

   可以使用 CSS 的 background-color 属性来设置表格的背景色，具体如下：

   .ant-table {
     background-color: #f5f5f5;
   }