web-dev-qa-db-ja.com

テーブル付きのMaterialDesignLiteグリッド

最近リリースされたMDLキットを試し、カードとテーブルでグリッドレイアウトを使用しようとしています。

私が見つけたのは、MDLグリッドがBootstrapネストされた列のグリッドほど柔軟ではないことです（おそらく 'cos私はまだそれについて十分に知りません）。したがって、私の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>
material-design-lite
10
Ish

私がそれぞれの問題であなたを助けることができるかどうか見てみましょう：

まず、カードが列全体を占めていない。問題はネストされた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 ここ を参照してください。

目標を少し変更したようですが、うまくいけば、これら2つを組み合わせて問題を解決できます。

8
Jacob Norton

方法は次のとおりです。

.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>
3
Ronnie Royston

テーブルをコンテナのサイズに適合させ、サイズの変更に対応するには、width属性を特定のパーセンテージに設定できます。

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