使用表格材料設計Lite網格

我正在試驗最近發佈的MDL工具包，並嘗試使用卡片和表格的網格佈局。使用表格材料設計Lite網格

我發現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>

來源

2015-07-11 Ish

這似乎是表是不是真的響應所有，使用從[例如其網站]（http://codepen.io/anon/pen/EjLraY）它根本沒有響應寬度變化。此外，請僅提供您的問題的示例代碼，而不是任何周圍的代碼（如導航欄和東西），以及從HTML分離CSS（更清楚您所應用的樣式），如[so]（https ：//jsfiddle.net/x9gj73y7/2/）。恐怕我不知道是否有修復。 – jdepypere

@jdepypere抱歉所有非必要的東西。我清理了一下。 – Ish

@jdepypere對於沒有響應的表是正確的。沒有關於這方面的材料設計指南，不管用戶體驗指導如何，這都是一種痛苦。你可以使用表格本身的單元格寬度來改變它的寬度，但這是它的範圍（並且它可能會導致一些對齊故障，然後需要處理。） – Garbee

讓我們看看如果我能幫助你每一個問題：

首先，卡不佔用整個列。問題是嵌套divs。如果你製作這樣的列：

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

這聽起來像你已經改變了你的目標，但希望你可以把這兩個一起解決你的問題。

來源

2015-07-14 16:46:38

要使您的表適應其容器的大小並響應任何尺寸變化，可以將其寬度屬性設置爲特定百分比。

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

來源

2015-07-15 02:02:42 Gabriel

這裏是如何做到這一點：

.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-17 18:50:07

很酷，感謝羅恩，這個答案對我來說是完美的！它也很方便不顯示移動設備上的所有列，感謝您提供高質量答案的努力。 –

使用表格材料設計Lite網格

回答

相關問題