带表格的 Material Design Lite 网格答案

【问题标题】：Material Design Lite grid with tables带表格的 Material Design Lite 网格
【发布时间】：2015-09-30 08:12:45
【问题描述】：

我正在尝试使用最近发布的 MDL 工具包，并尝试使用带有卡片和表格的网格布局。

我发现 MDL 网格不如嵌套列的 Bootstrap 网格灵活（可能是因为我对此还不够了解）。因此，在我的 3 列布局中，我并排使用卡片和表格来呈现我拥有的数据。

但不幸的是，除非我手动应用 width=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>

【问题讨论】：

似乎表格根本没有响应，使用example from their site 它根本不响应宽度变化。此外，请仅提供您的问题的示例代码，而不是任何周围的代码（如导航栏和其他东西），以及将 css 与 html 分开（更清楚您应用了哪些样式），如so。恐怕我不知道是否有解决办法。
@jdepypere 对所有不必要的东西感到抱歉。我清理了一下。
@jdepypere 关于表格没有响应是正确的。对此没有 Material Design 指导，无论 UX 指导如何，这样做都很痛苦。您可以使用表格本身的单元格宽度来更改其宽度，但这就是它的范围（它可能会导致一些对齐故障，然后需要处理。）
@Garbee 感谢您的 cmets。我已经放弃了让表格响应。相反，我试图让网格列表现得像一张桌子。但这也不是一件容易的事:(

标签： material-design-lite

【解决方案1】：

让我们看看我是否可以帮助您解决每个问题：

首先，卡片没有占据整列。问题是嵌套的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。

听起来您已经稍微改变了目标，但希望您可以将这两者结合起来解决您的问题。

【讨论】：

【解决方案2】：

要让您的表格适应其容器的大小并响应大小的任何变化，您可以将其宽度属性设置为某个百分比。

<table class="mdl-data-table mdl-js-data-table" style="width:100%;">
  ...
</table>

【讨论】：

【解决方案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>

【讨论】：

酷。谢谢罗恩。这个答案对我来说太完美了！不在移动设备上显示所有列也很方便。感谢您为提供高质量的答案所做的努力。
不幸的是，如果列的内容很长，它不会自动换行。