CSS 為表格定義了5個專用屬性。
一、border-collapse
該屬性用於定義表格的行和單元格的邊是合並在一起的還是按照標准的 HTML 樣式分開的。
語法:
border-collapse: separate | collapse
-
- separate:不合並單元格邊框
- collapse:合並單元格邊框
- separate:不合並單元格邊框
二、border-spacing
該屬性用於定義當表格邊框獨立,行和單元格的邊在橫向和縱向上的間距,該值不可以取負值。
語法:
border-spacing:20px 30px;
Tips:該屬性有一個值的表示行間距和列間距都為該值。如果為兩個值,第一個值表行間距,第二個值表示列間距。
三、caption-side
該屬性可以定義標題的顯示位置。
語法:
caption-side:top | bottom | left | right
-
- top:表示標題位於表格上面;
- bottom:表示標題位於表格下面;
- left:表示標題位於表格左側;
- right:表示標題位於表格右側;
- top:表示標題位於表格上面;
Tips:如果要水平對齊標題文本,可以使用 text-align 屬性。對於左右兩側的標題,可以使用 vertical-align 屬性進行垂直對齊,取值包括 top、middle 和 bottom,其他值無效,默認為 top。
四、empty-cells
該屬性用於設置是否顯示空白單元格。
語法:
empty-cells: show | hide;
-
- show:表示顯示空單元格;
- hide:表示隱藏空單元格;
五、table-layout
該屬性用於定義表格的布局算法。
語法:
table-layout: auto | fixed;
-
- auto:表格在每一單元格內所有的內容讀取計算之后才會顯示出來;
- fixed:IE 以一次一行的方式呈遞表格內容從而提供給信息用戶更快的速度;