[Bug Report] input-el inside table with border-spacing gets effected

[mrin9]

Element UI version

2.4.4

OS/Browsers version

all

Vue version

2.5.16

Reproduction Link

https://jsfiddle.net/mmx38qxw/3665/

Steps to reproduce

Create an <el-input> with append/prepend slot inside a table.
change the table style border-spacing
the styles gets leaked to the input element

What is Expected?

styles of table should not get inherited by the input element

What is actually happening?

styles of applied to table is effecting the the input element

[ziyoung]

element/packages/theme-chalk/src/input.scss

Lines 222 to 225 in 55c97e5

	@include b(input-group) {
	line-height: normal;
	display: inline-table;
	width: 100%;

@mrin9 you need use scoped CSS. Input uses inline-table layout, so it inherits style from a table.

[mrin9]

It seems the solution offered is just a temporary work-around not a solution,
In my opinion the frame-work should not force me to use scoped CSS.
What if I like to re-use my styles elsewhere in the App.

Instead I think its the frameworks responsibility to apply more specific CSS to its controls, which it is doing for many other controls by applying proprietary classes

and in this particular case if input is using display:inline-table then it should also specify other properties that matters to achieve the look shown in the documentation such as border-spacing that way you dont depend on the default values supplied by the browser and it is not inherited and overridden by the parent tag

the fix may be to add border-spacing and border-collapse along with display: inline-table;

@include b(input-group) {
  line-height: normal;
  display: inline-table; 
  border-spacing:0;
  border-collapse: collapse;
  width: 100%;

Is there anyway I can get this issue another consideration ?
or should I create a new issue stating in-line styles of <table> breaks styles for <el-input>

[ziyoung]

@mrin9 It seems that scoped CSS is not a good solution. You can make a pull request.😀