display:tableざっくり概要 cssでdisplay: table;display: table-cell;をつかってレイアウトする際にちょっとはまった事。 display:tableを使うとテーブルレイアウトできるから、縦ラインを揃えられたり、table-layout: fixed;を指定する事でセル幅を揃えることができる。 やりたいこと table内のセルを一部に隙間を開けたい場合、ちょっとハマった。そもそもtable-cellにはmarginが効かないという事をマークアップして初めて気づいた。background-clipというプロパティを使うとできるらしいけど、今回はIE8対応しなくちゃならないのでボツ。 結果 まあ一番原始的な・・・というかこれしか思いつかなかったけど、table-cellの中にブロック要素を配置してそれをレイアウトするやり方で解決しました。table-
![css display:tableで、[非]等間隔に並べるには - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f53a20d867b1ca822f2b2a8e7a40ee08dca668d/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9Y3NzJTIwZGlzcGxheSUzQXRhYmxlJUUzJTgxJUE3JUUzJTgwJTgxJTVCJUU5JTlEJTlFJTVEJUU3JUFEJTg5JUU5JTk2JTkzJUU5JTlBJTk0JUUzJTgxJUFCJUU0JUI4JUE2JUUzJTgxJUI5JUUzJTgyJThCJUUzJTgxJUFCJUUzJTgxJUFGJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz01YjUwMDg1NGZhNzVlOTUxNTBjNDFkMzhkNzViZTBjOQ%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwc3VnaWlpOCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9YzI3YzQwOTIwYjBiMjAyM2JiZDQ0NzY3YWM1NDliNzg%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D05be7337f58351e7d1012423d957df28)