[CSS]table td預設是vertical-align: middle???

2017-05-02 156 words One minute

Contents

在撰寫 CSS 時，有時會遇到表格內容沒有靠上對齊的問題，而是自動垂直置中。這是瀏覽器**預設樣式（User Agent Stylesheet）**造成的。

瀏覽器預設的表格垂直對齊

根據 W3C CSS 規範，瀏覽器預設樣式表對表格元素的 vertical-align 設定如下：

1
2


thead, tbody, tfoot { vertical-align: middle; }
td, th, tr          { vertical-align: inherit; }

這代表：

tbody、thead、tfoot 預設垂直置中（middle）
td、th、tr 繼承父元素的設定（inherit）

因此，td 內的內容實際上繼承自 tbody 的 vertical-align: middle，結果就是表格儲存格內容預設垂直置中。

如何覆蓋預設值

若要讓儲存格內容靠上對齊，只需在 CSS 中明確指定：

1
2
3
4
5
6
7
8
9


/* 讓所有 td 靠上對齊 */
td {
  vertical-align: top;
}

/* 或只針對特定 class */
.table-top td {
  vertical-align: top;
}

vertical-align 在表格中的可用值

值	效果
`top`	靠儲存格頂端對齊
`middle`	垂直置中（預設）
`bottom`	靠儲存格底端對齊
`baseline`	對齊文字基線

注意：vertical-align 在表格中的行為與在行內元素中不同。在行內元素（inline、inline-block）中，它是相對於同行其他元素對齊；在表格儲存格中，它控制儲存格內容的垂直位置。

表格相關排版技巧

使用 CSS Reset 統一基準

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


/* 常見 CSS Reset 做法 */
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  vertical-align: top;    /* 統一靠上 */
  text-align: left;       /* 統一靠左 */
  padding: 8px;
}

避免繼承問題

若使用框架（如 Bootstrap），框架本身可能已設定 td { vertical-align: top; }，要注意不同框架的預設值差異，以避免樣式衝突。