css table佈局

表格佈局有兩種方式:html

1.HTML Table(<table>標籤)和 2. CSS Table(display:table 等相關屬性)。佈局

HTML Table是指使用原生的<table>標籤,而CSS Table是指用CSS屬性模仿HTML 表格的模型。spa

二者對應關係大體以下:code

  1. table { display: table }
  2. tr { display: table-row }
  3. thead { display: table-header-group }
  4. tbody { display: table-row-group }
  5. tfoot { display: table-footer-group }
  6. col { display: table-column }
  7. colgroup { display: table-column-group }
  8. td, th { display: table-cell }
  9. caption { display: table-caption }

l利用上面所列的屬性可方便實現許多功能:htm

如:塊狀元素垂直居中:display: table-cell; vertical-align: middle; 關於元素居中問題有過專門概括blog

  實現聖盃佈局。get

相關文章
相關標籤/搜索