web-dev-qa-db-ja.com

Material Design Liteテーブルを100％幅にする正しい方法は何ですか？

GoogleのMaterial Design Lite フレームワークの使用を検討していますが、テーブルを含む要素の100％の幅にどのように広げることができるのか疑問に思っています：

次の表をご覧ください。

<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
  <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>

このMDLテーブルをコンテナの100％にまたがらせるにはどうすればよいですか？

これを設定しました JSFiddledocs から取得したテーブルの例。

htmlcssmaterial-design-lite
15
Luke

幅を直接100％に設定する新しいfullwidthクラスをtableおよびthに追加するだけです。

.fullwidth {
    width: 100%;
}

これを試してくださいfiddle

18
Siddharth Thevaril

これが正しい方法かどうかはわかりませんが、scssファイルを検索した後、私が見つけた唯一のクラス（ボタンがフォームにある場合は大丈夫だと思います）は。mdlです-textfield--full-width

そうでなければ、ヘルパークラス「.mdl-full-width」を作成しても悪くありません。

<input type="submit" value="Sign In" class="mdl-textfield--full-width mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect"></input>

46行目のソースファイル

//全幅で表示するオプションのクラス。 .mdl-textfield--full-width {width：100％;}

2
Michael Guild

私があなたのフィドルに行ったこの編集をチェックしてください https://jsfiddle.net/sphm1zxL/2/

以下を使用して、すべての要素に「新しい」CSSクラスを追加するだけです。

.new{
    width: 100%
}
1
Vikas Dhochak

完全なデモを見る http://www.tutorialspark.com/Google_MaterialDesignLite_Tutorials/MDL_Material_Design_Lite_Tables.php

 table{width:100%;} 
<html>
  <head>
    <title>Google MDL Tables : Selectable Data Table  </title>
    <!-- Material Design Lite -->
    <script src="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.min.js"></script>
   <link rel="stylesheet" 
    href="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.red-purple.min.css" /> 
    <!-- Material Design icon font -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  </head>
 
  <body>
  <div class="main-demo">
       <!-- Class "mdl-data-table-selectable" -->
   <table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
  <thead>
    <tr>
      <th class="mdl-data-table__cell--non-numeric">Component</th>
      <th>Quantity</th>
      <th>Unit Cost</th>
    </tr>
  </thead>
  <tbody>
    <!-- Row 1 -->
    <tr>
      <td class="mdl-data-table__cell--non-numeric">Keyboard(backlit)</td>
      <td>10</td>
      <td>$50</td>
    </tr>
    
    <!-- Row 2 -->
    <tr>
      <td class="mdl-data-table__cell--non-numeric">Mouse(wireless)</td>
      <td>22</td>
      <td>$25</td>
    </tr>
    
    <!-- Row 3 -->
    <tr>
      <td class="mdl-data-table__cell--non-numeric">LED Display(1080p)</td>
      <td>56</td>
      <td>$113</td>
    </tr>
    
  </tbody>
</table>
    
  </div>
</body>
</html>
0
ethan hunt