文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >带表格的Material Design Lite网格

问带表格的Material Design Lite网格
EN

Stack Overflow用户
提问于 2015-07-12 01:50:11
回答 3查看 14.7K关注 0票数 10

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

我发现MDL网格不像Bootstrap网格那样灵活(可能是因为我还不太了解它)，所以在我的3列布局中，我使用卡片和表格并排显示我拥有的数据。

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

JSFiddle

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

代码语言：javascript
复制
<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>
material-design-lite
EN

回答 3

Stack Overflow用户

发布于 2015-07-15 00:46:39

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

首先，卡片不会占据整个列。问题是嵌套的div。如果将列设置为如下所示：

代码语言：javascript
复制
<div class="mdl-cell mdl-cell--4-col mdl-card mdl-shadow--2dp">

而不是将卡片放在列中，然后它将占据整个列。请参阅更新的JSFiddle here。

接下来，对于嵌套柱，需要具有嵌套轴网，如下所示：

代码语言：javascript
复制
<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。

听起来你已经改变了你的目标，但希望你能把这两者结合起来来解决你的问题。

票数 8
EN

Stack Overflow用户

发布于 2016-07-18 02:50:07

下面是如何做的：

​

代码语言：javascript
复制
.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%;
}
代码语言：javascript
复制
<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>

​

票数 3
EN

Stack Overflow用户

发布于 2015-07-15 10:02:43

​

代码语言：javascript
复制
<table class="mdl-data-table mdl-js-data-table" style="width:100%;">
  ...
</table>

​

票数 -1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/31360070

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档