The iview Table component has always had a horizontal scroll bar

  <Col class="panel table-panel" :span="24">
  <Table style="width: 100%;" :loading="pageInfo.loading" :columns="columns" :data="tableData" border @on-row-click="rowClick"></Table>
  </Col>
  
  columns Col100%

Javascript iview vue.js vuex html

Apr.08,2021

because you add the border attribute, you will add a 1px border to each td by default. When there is data, iview will add a class to the last td without a frame, and when there is no data, all the frames with 1px in the class, will not be added to the horizontal scroll bar, which can be regarded as a small bug. Add a class to force to cover it

I have studied it for a long time, but I have not found a reasonable method. Finally, violence resolution .ivu-table-overflowX {overflow-x: hidden;} overwrites this type of violence in Iview, hoping to help you

you can use data to control whether there is an empty border to deal with this problem

     <i-table :columns="columns" :data="data" :border="data.length > 0">
     </i-table>

suggest you send out screenshots of the table. Check whether the element is the outer part of the style. In addition, do not give the table or a column a fixed width to try

to see whether the width of the outer element is right. In this case, the width of the parent element is not enough

it is estimated that the value of width in columns is not a positive integer. Like "100px", "30%", none of these values are good.

eMMM, I have not encountered this kind of problem

is the problem of border attribute in the table tag. There is indeed a scroll bar

without data.

this you can either h ide the scroll bar or write your own style
.ivu-table-overflowX::-webkit-scrollbar {display: none;}
so hide

.ivu-table-overflowX::-webkit-scrollbar {

height:4px;

}
/ small squares inside the scroll bar /
.ivu-table-overflowX::-webkit-scrollbar-thumb {

 border-radius:5px;
 background:rgba(0,0,0,0.2);
}

/ track in scroll bar /
.ivu-table-overflowX::-webkit-scrollbar-track {

-webkit-box-shadow:rgba(0,0,0,0.2);
border-radius:0;
background:rgba(0,0,0,0.1);

}
write the specific parameters of the style in this way. Watch and adjust

for yourself.

Previous: How does VueCli3.0 build multiple pages?

Next: In element-ui, how does the Filter function of the table when Table uses Pagination for paging? Filter all the data, not the current page data