border-collapse

屬性樣式	設定值
border-collapse 框線重疊	collapse (重疊) separate (分開)
預設值：collapse 適用於：表格標籤 繼承性：有

這個樣式是用來設定表格的框線(格線)是否要重疊。

以下則是 collapse (重疊)與 separate (分開)的結果。

這是 collapse (框線重疊) 儲存格一 儲存格二 儲存格三 儲存格四

這是 separate (框線分開) 儲存格一 儲存格二 儲存格三 儲存格四

table.MyStyle {
	border-collapse: collapse;
	}

border-spacing

屬性樣式	設定值
border-spacing 框線厚度	絕對單位：in、cm、mm、pt、pc 相對單位：em、ex、px
預設值：0 適用於：表格標籤 繼承性：有

這個樣式是用來調整表格框線(格線)的厚度，或個別儲存格的框線厚度。

table.MyStyle {
	border-spacing: 2px;
	}

caption-side

屬性樣式	設定值
caption-side 表格標題	bottom (標題在表格下方) left (標題在表格左邊) right (標題在表格右邊) top (標題在表格上方)
預設值：top 適用於：表格標籤 繼承性：有

這個樣式是用來調整表格標題的位置。

caption {
	caption-side: bottom;
	}

empty-cells

屬性樣式	設定值
empty-cells 空格或看不見資料的儲存格	show (顯示) hide (隱藏)
預設值：show 適用於：表格的儲存格(table-cell) 繼承性：有

這個樣式是用來設定表格儲存格在沒有內容時是否顯示儲存格。

table.MyStyle {
	empty-cells: hide;
	}

table-layout

屬性樣式	設定值
table-layout 表格配置方式	auto (自動配置) fixed (固定配置)
預設值：auto 適用於：表格的儲存格(table-cell) 繼承性：有

這個樣式是用來設定表格配置的方式。 auto 表示自動依據儲存格的內容來配置，fixed 則是依據表格、欄、列或儲存格的寬度(width)來配置。

在顯示表格的速度上，固定配置的方式會比自動配置的方式快。這也是這兩個設定值的唯一差異處。

table.MyStyle {
	width: 500px;
	table-layout: fixed;
	}

文章分類