2016年9月3日土曜日

[MDL] テーブルの列を左詰めで表示する

イメージ

Google が提唱するマテリアル デザインの開発キット、Material Design Lite (以下、MDL) の Tips です。

今回は、テーブルの列を左詰めで表示するサンプル コードを紹介します。

環境

  • MDL バージョン: 1.2.0
  • 動作確認ブラウザ (すべて Windows 10):
    • Chrome 53
    • Microsoft Edge
    • Internet Explorer 11

ライブ デモ (サンプル コード)


解説

テーブルの各行の末尾に、次のスタイルを指定したセル (<th><th>) を追加すると、列を左詰めにすることができます。

.table__cell--fill {
    padding: 0;
    width: 100%;
}

反対に、列を右詰めにするには、各行の先頭にセルを追加します。

参考

0 件のコメント:

コメントを投稿