一、CSS 表格常用樣式屬性
表格常用樣式屬性
- 邊距屬性: padding
- 尺寸屬性: width、height
- 設定表格或者單元格的尺寸
- 文本格式化屬性
- 背景屬性 : 設定表格或者單元格的背景色或者背景圖像
- border 屬性: 設定表格邊框
垂直方向對齊
- vertical-align 屬性
- 在表單元格中，設定單元格框中的單元格内容的對齊方式
- 取值
- vertical-align : top/middle/bottom;
二、表格特有樣式屬性
邊框合并 border-collapse
- 如果設定了單元格的邊框，相鄰單元格的邊框會單獨顯示，類似于雙線邊框
- border-collapse 屬性: 合并相鄰的邊框
- 設定是否将表格邊框合并為單一邊框
- border-collapse:separate/collapse;
邊框邊距 border-spacing
- border-spacing 屬性
- 設定相鄰單元格的邊框間的距離
- 僅限于分隔單元格邊框，即 border-collapse 屬性為 separate 值的情況下，也稱為邊框分離模式
- 取值為長度值，可以為該屬性指定一個或者兩個值
- 指定一個值: 該值同時應用于水準和垂直間距
- 指定兩個值: 第一個值指定水準間距，第二個值指定垂直間距，且兩個值之間用空格隔開
标題位置 caption-side
- caption-side 屬性設定表格标題的位置，指定表标題相對于表框的放置位置
- 可取值
- top : 表格标題定位在表格之上，為預設值
- bottom : 表格标題定位在表格之下
‘
顯示規則 table-layout
- table-layout 屬性用來幫助浏覽器如何顯示或者布局一張表，即用來設定顯示表格單元格、行、列的算法規則
- auto: 列寬度由單元格内容設定，為預設值，即自動表格布局
- fixed:列寬由表格寬度和列寬度設定，即固定表格布局
- 自動表格布局
- 單元格的大小會适應内容的大小
- 在表格複雜時會比較慢
- 适用于不知道每一列的确定大小
- 固定表格布局
- 取決于表格寬度、列寬度、表格邊框寬度、單元格間距，而與單元格的内容無關
- 會加速表的顯示，因為浏覽器在接受到第一行後就可以顯示表格
- 固定布局算法比較快，但是不太靈活
- 自動算法比較慢，不過更能反映傳統的 HTML 表