question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Table scroll support overflow auto and min-height

See original GitHub issue
  • I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

  • scroll={{y: number}} y只能是数字,不能使用css的calc(100vh-120px)
  • y只能设置table-bodymax-height,不够灵活,比如无法设置height, min-height

What does the proposed API look like?

height

表格固定高度,在数据少的时候,分页工具栏位置固定在底部,阿里云控制台以前就是这样的

看了这个 https://github.com/ant-design/ant-design/issues/2428 ,以前是实现了,后面改成了max-height

table一般有两种使用场景,增删改查的列表页和Modal弹框里的数据表格,

  • 在列表页的时候,分页栏是固定还是跟随表格内容,各有所需,希望能都支持

  • Modal里显示表格的时候,希望表格内容可以固定高度,有以下原因

    • 显示modal的时候,表格内容异步加载,modal高度会自动变化,设置modal高度不能完美解决这个问题
    • 表格数据的数量可以预估,数量不多,此时不需要分页,没有高度,就难看了,表格数据变化的时候,整个modal内容高度也在变化

minHeight

功能需求类似height

maxHeight

等同现在的scroll={{y: number}}

bodyStyle

可以完全自定义table body style,如果不能增加属性height,增加bodyStyle也是可以的

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:12
  • Comments:37 (7 by maintainers)

github_iconTop GitHub Comments

27reactions
kunhourcommented, Sep 18, 2018

这个坚决同意,希望官方支持,自己硬改样式也可以做到

7reactions
afc163commented, Mar 21, 2019

y 现在可以写 calc(100vh - 80px) 这样哦。

Read more comments on GitHub >

github_iconTop Results From Across the Web

Table auto-scroll with min height - css - Stack Overflow
by "at least prints 3 rows", I mean that T must have a min height that allows to display at least three rows"....
Read more >
overflow - CSS: Cascading Style Sheets - MDN Web Docs
No scrollbars are provided, and no support for allowing the user to scroll (such as by dragging or using a scroll wheel) is...
Read more >
CSS overflow property - W3Schools
The overflow property specifies what should happen if content overflows an element's box. ... overflow: visible|hidden|clip|scroll|auto|initial|inherit; ...
Read more >
overflow - CSS-Tricks
Whereas if you set the overflow value to hidden , the image will cut off at 200px. div { overflow: visible | hidden...
Read more >
"min-height" | Can I use... Support tables for HTML5, CSS3, etc
2 IE8 has some bugs with max-width / height combined with overflow: auto / scroll . # ☆. CSS property: height: ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found