Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
table要素はレイアウトなどの本来の『表』以外の目的に使用することが望ましくありません。そこでレイアウト目的には他のブロック要素やリスト要素をdisplay属性と一緒に使うことでこの問題を回避できます。しかしいちいちCSSのクラスにこの属性を定義するのは面倒なので、mixinにまとめてみました。ついでにZen-CodingやEmmetのコマンドも書いておきます。
<!-- 1*3テーブル Zen-Coding: div.tabel>ul.tr>li.td{foo-$}*3 -->
<div class="tabel">
<ul class="tr">
<li class="td">foo-1</li>
<li class="td">foo-2</li>
<li class="td">foo-3</li>
</ul>
</div>
<!-- 3*2テーブル Zen-Coding: ul.tabel>(li.tr>ul>(li.td>lorem3)*2)*3 -->
<ul class="tabel">
<li class="tr">
<ul>
<li class="td">Lorem ipsum dolor.</li>
<li class="td">Ipsa, ipsam, fugiat.</li>
</ul>
</li>
<li class="tr">
<ul>
<li class="td">Lorem ipsum dolor.</li>
<li class="td">Tenetur, esse architecto.</li>
</ul>
</li>
<li class="tr">
<ul>
<li class="td">Lorem ipsum dolor.</li>
<li class="td">Non, tempora, eos.</li>
</ul>
</li>
</ul>
/* table要素を使わずに */
@mixin display-table(){
.table{display: table;}
.it{display: inline-table;}
.rg{display: table-row-group;}
.hg{display: table-header-group;}
.fg{display: table-footer-group;}
.tr{display: table-row;}
.cg{display: table-column-group;}
.tc{display: table-cell;}
.tcap{display: table-caption;}
/* 必要なら以下のようにタグ名に近いクラスを再定義 */
.th, .td{display: table-cell;}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.