element-plus [Component] [table] Table width gets bigger as window expands but does not get smaller

z4bn682m 于 6个月前发布在其他

关注(0)|答案(4)|浏览(48)

Bug Type: Component

Environment

Vue Version: 3.3.4
Element Plus Version: 2.3.8
Browser / OS: Chrome 114.0.5735.133 / Ubuntu 22.04.2
Build Tool: Vite

Reproduction

el-table

Reproduction Link

Element Plus Playground

Steps to reproduce

Create a div with display:flex .

Inside that add an empty div and an <el-table> with a large amount of content.

Apply flex: 1 1 auto to the <el-table> to make it take up the full page width.

What is Expected?

The table should fit the available space and resize accordingly as the window is resized.

What is actually happening?

On first load the table is sized correctly. As the window width grows the table gets larger. However, when the window width gets smaller the table remains the same size and the window gets a horizontal scrollbar.

Additional comments

Removing the display:flex or setting flex-direction:column makes the problem go away.

element-plus

来源：https://github.com/element-plus/element-plus/issues/13663

4条答案

按热度按时间

flmtquvp1#

@mrchimp hey can you assign me this task?

赞(0）回复(0）举报 6个月前

k75qkfdt2#

I tried it and it seems to be caused by the css. When the width of an element under flex is set to 100%, and this element has a child element with a width like "180px", it is like being set with a ‘min-width’, and its value is the width of the child element.

Element Plus Playground

赞(0）回复(0）举报 6个月前

h5qlskok3#

try this:

.table-wrapper {
  width: 0;
  flex: 1 1 auto;
}

赞(0）回复(0）举报 6个月前

x9ybnkn64#

try this:

.table-wrapper {
  width: 0;
  flex: 1 1 auto;
}

Perfect! Tnx!

赞(0）回复(0）举报 6个月前

我来回答

element-plus [Component] [table] Table width gets bigger as window expands but does not get smaller

Environment

Reproduction

Reproduction Link

Steps to reproduce

What is Expected?

What is actually happening?

Additional comments

4条答案

相关问题

热门标签

最新问答

element-plus [Component] [table] Table width gets bigger as window expands but does not get smaller

Environment

Reproduction

Related Component

Reproduction Link

Steps to reproduce

What is Expected?

What is actually happening?

Additional comments

4条答案

相关问题

热门标签

最新问答