使用 mdl 将表格宽度设置为 100% 但不起作用答案

【问题标题】：table width to 100% with mdl but won't work使用 mdl 将表格宽度设置为 100% 但不起作用
【发布时间】：2017-08-10 06:37:28
【问题描述】：

所以我有以下代码，但是当我尝试使用宽度 100% 来适应屏幕上的表格时，它不起作用。但是，如果我从表中删除 mdl 类并且它是一个普通的 html 表，那么它就可以完美地工作。有没有什么办法解决这一问题？我在jsfiddle网站上有以下CSS、HTML和JS，所以大家比较容易判断。

.full-width {
    width: 100% !important;
}

#removeTable{
  width: 100% !important;
}

<table id="createScheduleTable" class="mdl-data-table mdl-js-data-table mdl-shadow--2dp full-width">

https://jsfiddle.net/sphm1zxL/216/

【问题讨论】：

标签： javascript css material-design

【解决方案1】：

由于mdl-data-table 中的CSS 样式white-space: nowrap;，输入字段保持在一行中。解决方法之一是：

<table id="createScheduleTable" style="white-space: normal;" class="mdl-data-table mdl-js-data-table mdl-shadow--2dp full-width">

【讨论】：