HTML/CSS

2014.04.28

display: table-cell 無法使用 margin/ padding 的解法


只要是使用 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 等間距調整,卻發現修改無效。假設你碰過這種狀況,不妨參考一下我推薦的解法。

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

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

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

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

使用 margin 調整的結果

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

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

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

因此可以發現,margindisplay: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* 的支援度囉!

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

歡迎給我點鼓勵,讓我知道你來過 :)

guest
0 則留言
Inline Feedbacks
View all comments
Copyright (C) MUKI space* / Reborn Theme All Rights Reserved.