css display:tableで、[非]等間隔に並べるには

display:tableざっくり概要

cssでdisplay: table;display: table-cell;をつかってレイアウトする際にちょっとはまった事。
display:tableを使うとテーブルレイアウトできるから、縦ラインを揃えられたり、table-layout: fixed;を指定する事でセル幅を揃えることができる。

やりたいこと

table内のセルを一部に隙間を開けたい場合、ちょっとハマった。そもそもtable-cellにはmarginが効かないという事をマークアップして初めて気づいた。background-clipというプロパティを使うとできるらしいけど、今回はIE8対応しなくちゃならないのでボツ。

結果

まあ一番原始的な・・・というかこれしか思いつかなかったけど、table-cellの中にブロック要素を配置してそれをレイアウトするやり方で解決しました。table-cellを指定した要素は直接レイアウトしない。

#例えば一番左セルに隙間を空ける
.table1 li:first-child div {
    margin-right: 30px;
}
</style>
<ul class="table1">
    <li><div>A</div></li>
    <li><div>B</div></li>
    <li><div>C</div></li>
    <li><div>D</div></li>
    <li><div>E</div></li>
</ul>