只要是使用 HTML+DIV 排版的人，應該都很清楚 table 是用來繪製表格，而非用來排版的這件事情。

然而因為 DIV 真的太好用了，現在很多人幾乎都不知道 table, tr, td... 該怎麼互相搭配與運用。雖然不清楚是哪些因素影響，但是 W3C 卻在 CSS 的 display 屬性裡面支援 table 值，讓我們可以使用 DIV 就做出跟 HTML 的 table 標籤一樣的效果。（該說是 CSS 跟 HTML 互打臉嗎？）

關於 display: table 的介紹與運用，知名部落客香腸已經有一篇很深入淺出的文章，我就不多贅述了。完全沒用過 display: table 的朋友、或想了解該怎麼使用的朋友，可以參考香腸的：用CSS+DIV畫表格(table)進行網頁排版。

我這篇針對的族群，是已實際用過 display: table 的朋友，當你們在使用的時候，也許會碰到「間距調整」的問題，例如要在每一個 table-cell 裡頭設定 margin 等間距調整，卻發現修改無效。假設你碰過這種狀況，不妨參考一下我推薦的解法。

正常狀況下，圖片緊密排列

一般我們要做水平排列的圖層，多半會使用 float 或 display 等屬性設定。如果今天你有製表的需求，或是其它因素考量，也可以嘗試使用 display:table 達成。

display:table 在預設情況下，只要我們給他一個寬度，裡面的元素就會自動依據總寬度分散對齊。

在這邊，因為每張圖寬為 120px，所以我先設定總寬是 480px，這樣他們就會緊密排列在一起。

使用 margin 調整的結果

如果我們希望每張圖都有一點空隙，不要緊密排列的話。正常思維下，都會使用 margin 達成。因此我在範例二加入了這段語法：

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

▼ 顯示結果為(你可以嘗試將 10px 修改成 100px，會發現沒有任何作用)：

因此可以發現，margin 對 display:table* 一家子是沒有任何作用的。透過 MSDN Document 對 margin 的介紹可以了解

Applies to: all elements except elements with table display types other than table-caption, table and inline-table
除了 display 為 table 的屬性不支援外，適用所有元素（包含 table-caption, table, inline-table ）。

margin - CSS | MSDN

因為不支援 margin，所以沒有任何效果也是正常的喔。

將寬度寫死的結果

既然 margin 沒有任何作用，我們可能會利用 display:table 分散排列的特性，手動設定寬度讓圖片對齊。

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

將整體寬度設定為 505px 後，就會根據寬度分散對齊，變成下面的圖片效果：

乍看之下達到了我們想要的效果，每張圖片中間都有間隙。但仔細研究後你會發現兩個問題：

1. 第一張圖片的最左邊還是貼齊 div，沒有任何空隙
2. 假使圖片超過四張，間隙就會消失了（因為圖片寬度寫死，所以沒彈性）

由此可知，將寬度寫死，絕對不是一個好解法。曾經嘗試過用這種解法的朋友，建議把它拋諸腦後吧！

使用 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* 的支援度囉！

請記得，將寬度寫死，絕對不是一個好解法喲 🙂

2

發生錯誤。