テーブル

Movable Type で表形式のデータの表示と操作に使います。

  • テーブル実装の際には .table .mt-table の 2 クラスを記述してください。
  • テーブルに外枠を付けるために <div class="mt-table--outline"> ... &;lt/div> という入れ子を用意します。
  • テーブルヘッダーは <thead> テーブルのコンテンツには <tbody> で囲ってください。
  • Movable Type でよく実装される横並びのテーブルヘッダーには scope="col" を必ず記述してください。
  • 行をハイライトさせたい場合、<tr> 要素にクラス名 mt-table__highlight を記述します。
  • 現在の行をハイライトさせたい場合、<tr> 要素にクラス名 mt-table__highlight--current を記述します。

基本形

並べ替えの UI を追加したい場合、昇順はmt-table__ascend、降順はmt-table__descendを、並べ替えしたい列項目のリンクのクラス名として加えます。

タイトル 更新日 製作者
Movable Type AWSハンズオンセミナー 2017年 4月20日 yuji
安心・低価格のウェブサービス型CMS 2017年 4月18日 yuji
CMS選定中・情報収集中のWeb制作者様 2017年 4月10日 yuji 
<div class="mt-table--outline">
  <table class="table mt-table">
    <thead>
      <tr>
        <th scope="col">タイトル</th>
        <th scope="col"><a href="javascript://" class="mt-table__descend">更新日</a></th>
        <th scope="col">製作者</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Movable Type AWSハンズオンセミナー</td>
        <td>2017年 4月20日</td>
        <td>yuji</td>
      </tr>
      <tr class="mt-table__highlight--current">
        <td>安心・低価格のウェブサービス型CMS</td>
        <td>2017年 4月18日</td>
        <td>yuji</td>
      </tr>
      ...
    </tbody>
  </table>
</div>

チェックボックス

列だけでなく行での操作が発生するので、各行の最初の <td> に scope="row" を記述してください。
チェックボックスには操作目的を示すラベルを添え、.sr-only を加えて非表示にします。input 要素には id を添え、その値の対になる for 属性が label にないとうまく動作しないので注意してください。

タイトル 更新日 製作者
Movable Type AWSハンズオンセミナー 2017年 4月20日 yuji
安心・低価格のウェブサービス型CMS 2017年 4月18日 yuji
CMS選定中・情報収集中のWeb制作者様 2017年 4月10日 yuji 
<div class="mt-table--outline">
  <table class="table mt-table">
    <thead>
      <tr>
        <th class="mt-table__control"></th>
        <th scope="col">タイトル</th>
        <th scope="col">更新日</th>
        <th scope="col">製作者</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td scope="row"><div class="custom-control custom-checkbox"><input type="checkbox" class="custom-control-input" id="checkbox1"><label class="custom-control-label" for="checkbox1"><span class="sr-only">選択</span></label></div></td>
        <td>Movable Type AWSハンズオンセミナー</td>
        <td>2017年 4月20日</td>
        <td>yuji</td>
      </tr>
      <tr class="mt-table__highlight">
        <td scope="row"><div class="custom-control custom-checkbox"><input type="checkbox" class="custom-control-input" id="checkbox2"><label class="custom-control-label" for="checkbox2"><span class="sr-only">選択</span></label></div></td>
        <td>安心・低価格のウェブサービス型CMS</td>
        <td>2017年 4月18日</td>
        <td>yuji</td>
      </tr>
      <tr>
        <td scope="row"><div class="custom-control custom-checkbox"><input type="checkbox" class="custom-control-input" id="checkbox3"><label class="custom-control-label" for="checkbox3"><span class="sr-only">選択</span></label></div></td>
        <td>CMS選定中・情報収集中のWeb制作者様</td>
        <td>2017年 4月10日</td>
        <td>yuji</td>
      </tr>
    </tbody>
  </table>
</div>

階層パネル

セルの入れ子としてコンテンツを追加したい場合、.mt-table__hierarchy を記述し、1 アイテムでも <ul class="list-unstyled"> でリストしてください。

タイトル 更新日 製作者
Movable Type AWSハンズオンセミナー
  • 高いセキュリティで安心
  • 徹底的に最適化された環境で動作が快適
 2017年 4月20日 yuji
安心・低価格のウェブサービス型CMS
2017年 4月18日 yuji
CMS選定中・情報収集中のWeb制作者様 2017年 4月10日 yuji 
<div class="mt-table--outline">
  <table class="table mt-table">
    <thead>
      <tr>
        <th class="mt-table__control"></th>
        <th scope="col">タイトル</th>
        <th scope="col">更新日</th>
        <th scope="col">製作者</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td scope="row"><div class="custom-control custom-checkbox"><input type="checkbox" class="custom-control-input" id="checkbox10"><label class="custom-control-label" for="checkbox10"><span class="sr-only">選択</span></label></div></td>
        <td>
          Movable Type AWSハンズオンセミナー
          <div class="mt-table__hierarchy">
            <ul class="list-unstyled">
              <li>高いセキュリティで安心</li>
              <li>徹底的に最適化された環境で動作が快適</li>
            </ul>
          </div>
        </td>
        <td>2017年 4月20日</td>
        <td>yuji</td>
      </tr>
    </tbody>
  </table>
</div>