15

私は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% に広げるにはどうすればよいですか?

docsから取得したテーブルの例を使用して、このJSFiddleをセットアップしました。

4

3 に答える 3

19

幅を直接 100% に設定する新しいfullwidthクラスをtableandに追加するだけです。th

.fullwidth {
    width: 100%;
}

このフィドルを試してください

于 2015-07-07T06:59:03.183 に答える
2

これが正しい方法かどうかはわかりませんが、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--全角 { 幅: 100%;}

于 2015-12-24T23:38:28.183 に答える
1

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

次のように、すべての要素に「新しい」css クラスを追加するだけです。

.new{
    width: 100%
}
于 2015-07-07T06:13:18.003 に答える