10

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

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

但不幸的是，除非我手动应用 width=100%，否则卡片不会跨越一列的整个宽度。但是一旦我这样做，表格就没有响应，并且在屏幕尺寸减小时与周围的卡片重叠。

JSFiddle

谁能告诉我如何摆脱这个问题。

<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>
4

3 回答 3

8

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

首先，卡片没有占据整列。问题是嵌套的div。如果您制作这样的列：

<div class="mdl-cell mdl-cell--4-col mdl-card mdl-shadow--2dp">

而不是将卡片放在列内，然后它将占据整个列。在此处查看更新的 JSFiddle 。

接下来，对于嵌套列，您需要嵌套网格，如下所示：

<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 。

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

于 2015-07-14T16:46:38.983 回答
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>

于 2016-07-17T18:50:07.477 回答
-1

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

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

于 2015-07-15T02:02:42.947 回答