iview的表格组件宽度自适应问题

Question

缩小浏览器宽度，表格不会自适应，导致出现滚动条。
增加浏览器宽度，表格会自适应，
但是iview的官网是可以做到自适应的，是哪个css样式覆盖掉了吗，应该怎么解决

Answer 1

html:

<Table :columns="columns" :data="data" class="table" />

css

  .table table{
    // table-layout: auto; 
    width: 100% !important;
  }

Answer 2

不要给列设置width属性就可以了

Answer 3

在这个table标签外边加一个div标签或者其它的什么，然后给这个div增加一个百分比宽度。这个时候，这个table就会百分百充满这个div标签。

Answer 4

刚好也遇到了这个问题，我说说我的情况和解决方法，供大家参考：
html代码如下：

  <div id="app">
    <div class="menu">
      <div class="left">left</div>
      <div class="right">
        <div class="container">
          <div class="content">
            <p>content</p>
            <i-table border :columns="columnsAsset" :data="assetList"></i-table>
          </div>
        </div>
      </div>
    </div>
  </div>

css:

  <style>
    .menu {
      display: flex;
    }

    .left {
      position: fixed;
      width: 60px;
      background-color: #60729F;
      height: 100vh;
    }

    .right {
      margin-left: 60px;
      flex-grow: 1;
      /*overflow: auto;*/
    }
    .container {
      display: flex;
      border: solid 1px red;
    }
    .content {
      border: solid 1px blue;
      width: 100%;
    }
  </style>

js:

  <script>
    new Vue({
      el: '#app',
      data: {
        columnsAsset: [
          {
            title: 'ID',
            key: 'id'
          },
          {
            title: '姓名',
            key: 'name'
          },
        ],
        assetList: [
          {id: 1, name: 'a'},
          {id: 2, name: 'b'}
        ]
      }
    })
  </script>

对于我这种情况来说，起决定性因素的是.right中的overflow: auto;这行代码，如果注释掉，就会出现表格宽度不能自适应的情况。

Answer 5

我今天也碰到了这个问题，最后发现是它外层元素导致的，具体是什么元素可能要看布局的样式设置了，我是因为用最顶层的有个div没有设置overflow:hidden导致了Table组件无法自适应宽度，加上就好了

Answer 6

228px是除了表格宽度外其他所有元素在横向上的宽度，就是窗口宽度减去其他元素的宽度，剩余的就是表格宽度