[Bug Report] When the height and width setting of the scrolling bar is not equal,the Table‘s fixedHeight and fixedBodyHeight calculate incorrectly

### Element UI version
2.15.13

### OS/Browsers version
Window10/Chrome v110.0.5481.178

### Vue version
2.7.14

### Reproduction Link
https://codepen.io/z_zayn/pen/RwYLyzj?editors=1100

### Steps to reproduce
1. Use the el-table component and set a fixed header (use height attribute) and a fixed column for it.
2. Set the scrollbar's width and height and ensure they are not equal.(e.g width: 5px;height: 12px;)
3. You will see:
a. the fixed column will cover the horizontal scroll bar.
b. when scrolling to the last row, the data is misaligned.

### What is Expected?
1. The fixed column's height calculate corretly.
2. when scrolling to the last row, the data is shown normally.

### What is actually happening?
1. the fixed column will cover the horizontal scroll bar
2. when scrolling to the last row, the data is misaligned

I have read your guys' code,and found this in table-layout.js:
```js
this.viewportHeight = this.scrollX ? tableHeight - (noData ? 0 : this.gutterWidth) : tableHeight;
this.fixedBodyHeight = this.scrollX ? (this.bodyHeight - this.gutterWidth) : this.bodyHeight;
```
the gutterWidth is assigned with:
```js
this.gutterWidth = scrollbarWidth();
```

It looks like you're subtracting the width of the scrollbar, but for a horizontal scrollbar, it's the height that should be subtracted.
In fact you mentioned this in the comments, but don't know why the wrong algorithm was used when actually doing it
```js
this.fixedBodyHeight = null; // Table Height - Table Header Height - Scroll Bar Height
this.viewportHeight = null; // Table Height - Scroll Bar Height
```