我正在尝试使用最近发布的MDL工具包并尝试将网格布局与卡片和表格一起使用。
我发现MDL网格不如嵌套列的Bootstrap网格那么灵活（可能'我还不太了解它）。因此，在我的3列布局中，我并排使用卡片和表格来显示我拥有的数据。
但遗憾的是，除非我手动应用宽度= 100％，否则该卡不会跨越列的整个宽度。但是一旦我这样做，当屏幕尺寸缩小时，桌子就没有响应并且与卡片重叠。
任何人都可以告诉我如何摆脱这个问题。
<body>
<main class="mdl-layout__content">
<div class="page-content">
<div class="demo-grid-1 mdl-grid">
<div class="mdl-cell mdl-cell--4-col ">
<div class="mdl-card mdl-shadow--4dp demo-card-wide">
<div class="mdl-card__media">
<img src="http://www.gaynz.com/articles/uploads/2/Auckland-at-night.jpg" width="173" height="157" border="0" alt="" style="padding:10px;">
</div>
<div class="mdl-card__supporting-text">Auckland Sky Tower, taken March 24th, 2014</div>
<div class="mdl-card__supporting-text">The Sky Tower is an observation and telecommunications tower located in Auckland, New Zealand. It is 328 metres (1,076 ft) tall, making it the tallest man-made structure in the Southern Hemisphere.</div>
</div>
</div>
<div class="mdl-cell mdl-cell--4-col">
<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp mdl-cell--4-col" style=" width: 100%">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">Material</th>
<th>Quantity</th>
<th>Unit price</th>
</tr>
</thead>
<tbody>
<tr>
<td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
<td>25</td>
<td>$2.90</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
<td>50</td>
<td>$1.25</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
<td>10</td>
<td>$2.35</td>
</tr>
</tbody>
</table>
</div>
<div class="mdl-cell mdl-cell--4-col">
<div class="mdl-card mdl-shadow--2dp demo-card-wide">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Welcome</h2>
</div>
<div class="mdl-card__supporting-text">
<div class="demo-grid-1 mdl-grid">
<div class="mdl-cell mdl-cell--3-col mdl-cell--2-col-tablet mdl-cell--1-col-phone small-cell">this is a text</div>
<div class="mdl-cell mdl-cell--3-col mdl-cell--2-col-tablet mdl-cell--1-col-phone small-cell">another text</div>
<div class="mdl-cell mdl-cell--3-col mdl-cell--2-col-tablet mdl-cell--1-col-phone small-cell">30/05/2015</div>
<div class="mdl-cell mdl-cell--3-col mdl-cell--2-col-tablet mdl-cell--1-col-phone small-cell">3999.34</div>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
答案 0 :(得分：8)
让我们看看我是否可以帮助解决每个问题：
首先，卡不占据整列。问题是嵌套的div。如果您按照以下方式创建列：
<div class="mdl-cell mdl-cell--4-col mdl-card mdl-shadow--2dp">
不是将卡放在列中，而是占用整列。请参阅更新的JSFiddle here。
接下来，对于嵌套列，您需要具有嵌套网格，如下所示：
<main class="mdl-layout__content">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--4-col mdl-card mdl-shadow--2dp">
<div class="mdl-card__supporting-text">
<main class="mdl-layout__content">
<div class="mdl-grid">
<div class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col">
请参阅JSFiddle here。
听起来你已经改变了一点目标，但希望你能把这两者放在一起来解决你的问题。
答案 1 :(得分：3)
以下是如何操作：
.mdl-data-table {
table-layout:fixed;
width:100%;
}
#my-table td, th {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
/* unrelated to responsive table css */
#my-table{
margin-top:24px;
}
.material-icons {
vertical-align: -25%;
}<meta name="description" content="Responsive Material Design Lite Table" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.green-light_green.min.css" />
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
<section class="mdl-grid" id="my-table">
<div class="mdl-layout-spacer"></div>
<div class="mdl-cell mdl-cell--6-col-tablet mdl-cell--10-col-desktop mdl-cell--stretch">
<table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp">
<thead>
<tr>
<th>Key</th>
<th>Description</th>
<th>Run</th>
<th><i class="material-icons">timer</i></th>
<th>Work</th>
<th><i class="material-icons">timer</i></th>
<th>Play</th>
<th><i class="material-icons">timer</i></th>
<th>Study</th>
<th><i class="material-icons">timer</i></th>
<th>Assumptions</th>
<th>Climb Mountain</th>
<th>Fly Kite</th>
</tr>
</thead>
<tbody>
<tr>
<td>ABC-1234</td>
<td>asdf asdf asdf asdf</td>
<td>asdf asdf asdf asdf</td>
<td>25</td>
<td>qwer qwer qwer</td>
<td>25</td>
<td>sdfgs sdf sdgf</td>
<td>25</td>
<td>lkjhlk lkhjh</td>
<td>25</td>
<td>bvnfhf hffjj hdgdh</td>
<td>25</td>
<td>bjh jbh kjb bkjb</td>
</tr>
<tr>
<td>XYZ-1234</td>
<td>dfdf asdf asdf asdf</td>
<td>bgbgdf asdf asdf asdf</td>
<td>25</td>
<td>qwer qwer qwer</td>
<td>25</td>
<td>sdfgs sdf sdgf</td>
<td>25</td>
<td>lkjhlk lkhjh</td>
<td>25</td>
<td>bvnfhf hffjj hdgdh</td>
<td>25</td>
<td>bjh jbh kjb bkjb</td>
</tr>
</tbody>
</table>
</div>
<div class="mdl-layout-spacer"></div>
</section>
答案 2 :(得分：0)
要让您的表适应其容器的大小并响应任何大小的变化，您可以将其width属性设置为特定百分比。
<table class="mdl-data-table mdl-js-data-table" style="width:100%;">
...
</table>