之前发过一篇，用div+css替代table的文章，因为div+css实在好用。

已实际用过display: table的朋友，当你们在使用的时候，也许会碰到「间距调整」的问题，例如要在每一个table-cell裡头设定margin等间距调整，却发现修改无效。假设你碰过这种状况，不妨参考一下我推荐的解法。

话不多说，先上个范例！我使用图片+图说当作范例，例子包含：

正常状况下，图片紧密排列

使用margin调整的结果

将宽度写死的结果

使用border-spacing调整的结果

正常状况下，图片紧密排列

一般我们要做水平排列的图层，多半会使用float或display等属性设定。如果今天你有製表的需求，或是其它因素考量，也可以尝试使用display:table达成。

display:table在预设情况下，只要我们给他一个宽度，裡面的元素就会自动依据总宽度分散对齐。

在这边，因为每张图宽为 120px，所以我先设定总宽是 480px，这样他们就会紧密排列在一起，如下图所示：

使用 margin 调整的结果

如果我们希望每张图都有一点空隙，不要紧密排列的话。正常思维下，都会使用margin达成。因此我在范例二加入了这段语法：

.case-2 figure {
  margin: 10px;
}

显示结果为(你可以尝试将 10px 修改成 100px，会发现没有任何作用)：

因此可以发现，margin对display:table*一家子是没有任何作用的。

将宽度写死的结果

既然margin没有任何作用，我们可能会利用display:table分散排列的特性，手动设定宽度让图片对齐。

例如：4x120px + 5x5px = 480 + 25 = 505px

将整体宽度设定为 505px 后，就会根据宽度分散对齐，变成下面的图片效果：

乍看之下达到了我们想要的效果，每张图片中间都有间隙。但仔细研究后你会发现两个问题：

第一张图片的最左边还是贴齐 div，没有任何空隙

假使图片超过四张，间隙就会消失了（因为图片宽度写死，所以没弹性）

由此可知，将宽度写死，绝对不是一个好解法。曾经尝试过用这种解法的朋友，建议把它抛诸脑后吧！

使用 border-spacing 调整的结果

利用border-spacing，是目前普遍认为较适当的解法。

我们只要在display:table-cell的父层，也就是display:table这层加上第 3 跟 4 行的两行语法就可以萝：

.image-list {
  display: table;
  border-collapse:separate;
  border-spacing: 5px;
}

显示结果如下

跟刚刚使用宽度写死的范例图片相比，可以方便每一张图片的左右空隙都是一样的，不管是第一张或是最后一张，都留有 5px 的空隙。

但因为我们必须将这个设定写在父层，所以在image-list底下的所有display:table-cell都会套用此设定，如果有的 table 不想要有空隙设定，就必须单独把 HTML 的结构拉出来，或是再用 CSS 权重覆盖，算是比较麻烦的一点。

目前还无法只针对table-cell做调整，希望以后 W3C 可以增加更多对display:table*的支援度萝！

最后再看一次线上范例，加深自己的印象吧！请记得，将宽度写死，绝对不是一个好解法哟