Javascript 元素响应表问题

我使用Element（）创建了一个应用程序，我正在努力使表具有响应性

当我将窗口变宽时，一切都很好，但是当我将窗口变窄时，表格宽度保持不变，我尝试了所有表格选项，但似乎没有任何效果，下面是我的示例：，刷新页面后，表格大小会正确调整

我发现如果我在element-ui.common.js中注释这些行：

  this.bodyWidth = Math.max(bodyMinWidth, bodyWidth);
  this.table.resizeState.width = this.bodyWidth;

这是可行的，但我不确定其他选择是否仍然有效

---

你能帮我吗？有什么方法可以使此表响应吗？：）

我不知道元素UI中的数据属性绑定，所以我只与纯HTML和CSS共享响应表的代码。 说到移动/平板电脑视图，我们可以使用数据属性来显示表格

.rwd表{
利润率：1米0；
最小宽度：300px；
}
.rwd表tr{
边框顶部：1px实心#ddd；
边框底部：1px实心#ddd；
}
.rwd表th{
显示：无；
}
.rwd表td{
显示：块；
}
.rwd表td：第一个孩子{
填料顶部：.5em；
}
.rwd表td：最后一个孩子{
垫底：5em；
}
.rwd表td：之前{
内容：attr（data th）“：”；
字体大小：粗体；
宽度：6.5em；
显示：内联块；
}
@介质（最小宽度：480px）{
.rwd表td：之前{
显示：无；
}
}
.rwd表th、.rwd表td{
文本对齐：左对齐；
}
@介质（最小宽度：480px）{
.rwd表th、.rwd表td{
显示：表格单元格；
填充物：25em.5em；
}
.rwd表th:第一个子项.rwd表td:第一个子项{
左侧填充：0；
}
.rwd表th:最后一个子项.rwd表td:最后一个子项{
右边填充：0；
}
}
身体{
填充：0.2em；
颜色：#444；
背景：#eee；
}
h1{
字体大小：正常；
字母间距：-1px；
颜色：#34495E；
}
.rwd表{
背景#34495E；
颜色：#fff；
边界半径：.4em；
溢出：隐藏；
}
.rwd表tr{
边框颜色：#46637f；
}
.rwd表th、.rwd表td{
边缘：.5em 1米；
}
@介质（最小宽度：480px）{
.rwd表th、.rwd表td{
填充：1em！重要；
}
}
.rwd表th、.rwd表td:之前{
颜色：#dd5；
}

电影名称
体裁
年
粗俗的
星球大战
冒险、科幻
1977
$460,935,665
鸭子霍华德
“喜剧”
1986
$16,295,774
美国涂鸦
喜剧、戏剧
1973
$115,000,000

我不知道元素UI中的数据属性绑定，所以我只使用纯HTML和CSS共享响应表的代码。 说到移动/平板电脑视图，我们可以使用数据属性来显示表格

.rwd表{
利润率：1米0；
最小宽度：300px；
}
.rwd表tr{
边框顶部：1px实心#ddd；
边框底部：1px实心#ddd；
}
.rwd表th{
显示：无；
}
.rwd表td{
显示：块；
}
.rwd表td：第一个孩子{
填料顶部：.5em；
}
.rwd表td：最后一个孩子{
垫底：5em；
}
.rwd表td：之前{
内容：attr（data th）“：”；
字体大小：粗体；
宽度：6.5em；
显示：内联块；
}
@介质（最小宽度：480px）{
.rwd表td：之前{
显示：无；
}
}
.rwd表th、.rwd表td{
文本对齐：左对齐；
}
@介质（最小宽度：480px）{
.rwd表th、.rwd表td{
显示：表格单元格；
填充物：25em.5em；
}
.rwd表th:第一个子项.rwd表td:第一个子项{
左侧填充：0；
}
.rwd表th:最后一个子项.rwd表td:最后一个子项{
右边填充：0；
}
}
身体{
填充：0.2em；
颜色：#444；
背景：#eee；
}
h1{
字体大小：正常；
字母间距：-1px；
颜色：#34495E；
}
.rwd表{
背景#34495E；
颜色：#fff；
边界半径：.4em；
溢出：隐藏；
}
.rwd表tr{
边框颜色：#46637f；
}
.rwd表th、.rwd表td{
边缘：.5em 1米；
}
@介质（最小宽度：480px）{
.rwd表th、.rwd表td{
填充：1em！重要；
}
}
.rwd表th、.rwd表td:之前{
颜色：#dd5；
}

电影名称
体裁
年
粗俗的
星球大战
冒险、科幻
1977
$460,935,665
鸭子霍华德
“喜剧”
1986
$16,295,774
美国涂鸦
喜剧、戏剧
1973
$115,000,000

kavinraj的方法是一个很好的解决方案。 如果这个表真的很宽，你也可以把它包成一个div

<div class="table-container">
    <table></table>
</div>

@media screen and (max-width:768px) {
    .table-container {
        overflow: auto;
    }
}

@媒体屏幕和屏幕（最大宽度：768px）{
.桌上容器{
溢出：自动；
}
}

---

用户可以滑动查看表的其余部分

kavinraj的方法是一个很好的解决方案。 如果这个表真的很宽，你也可以把它包成一个div

<div class="table-container">
    <table></table>
</div>

@media screen and (max-width:768px) {
    .table-container {
        overflow: auto;
    }
}

@媒体屏幕和屏幕（最大宽度：768px）{
.桌上容器{
溢出：自动；
}
}

---

用户可以滑动以查看表的其余部分使用以下css它将显示每行4列您可以更改每行显示更多或更少列的百分比：

@media only screen and (max-width: 770px) {
  table tr td{
    float: left;
    width:25%;
  }
}

---

使用以下css，每行显示4列。您可以更改每行显示更多或更少列的百分比：

@media only screen and (max-width: 770px) {
  table tr td{
    float: left;
    width:25%;
  }
}

---

我参加聚会有点晚，但我刚才偶然发现了同样的问题，我想我应该分享一下我的发现：

当我在

div

或

span

中包装表格时，我遇到了完全相同的问题。扩展时具有完美的响应能力，但再次缩小浏览器窗口时完全没有响应能力。好像它被卡在了最大的宽度上

---

由于我确实需要使用v-if将我的表包装起来，有时还需要隐藏整个表组件，因此我不断尝试，最终发现当包装在

-标记中时，表的行为正常。

我参加聚会有点晚了，但刚才我偶然发现了同样的问题，我想分享一下我的发现：

当我在

div

或

span

中包装表格时，我遇到了完全相同的问题。扩张时具有完美的响应能力，但收缩时完全没有响应能力