1. 程式人生 > >table標籤修改tr標籤的行距,tbale標籤的td標籤間距

table標籤修改tr標籤的行距,tbale標籤的td標籤間距

修改tr標籤的行距,tbale標籤的td標籤間距

  1. 看如下Css檔案的程式碼,其都沒有table的tr行距產生效果
tr{
    margin-top: 10px;
    padding: 10px;
}
td{
    margin-left: 2px;
}

這個設定其實,會沒有效果的,原因就是對於table來說,它有一個屬性值會設定是否當成一個整體來看,且其有設定table元素間距行距的屬性。

  1. border-collapse 屬性設定表格的邊框是否被合併為一個單一的邊框
屬性值 作用描述
separate 預設值。邊框會被分開。不會忽略 border-spacing 和 empty-cells 屬性。
collapse 如果設定的話,邊框會合併為一個單一的邊框。會忽略 border-spacing 和 empty-cells 屬性。
inherit 從父元素繼承 border-collapse 屬性的值,大多數為collapse
  1. border-collapse屬性加上border-spacing屬性就可以設定tr標籤行間距,和td標籤的間距
<table style="border-collapse:separate; border-spacing:0px 10px;">
	<tr>
		<td>不等風雨,只等你</td>
		<td>汝,知否?</td>
	</tr>
	<tr>
		<td>春風十里不如你</td>
		<td>汝,知否?</td>
	</tr>
	<tr>
		<td>漂洋過海來看你</td>
		<td>汝,知否?</td>
	</tr>
</table>

border-spacing:2px 5px;第一個引數代表td的間距,第二個引數代表tr的行距。