table標籤修改tr標籤的行距,tbale標籤的td標籤間距
阿新 • • 發佈:2018-11-05
修改tr標籤的行距,tbale標籤的td標籤間距
- 看如下Css檔案的程式碼,其都沒有table的tr行距產生效果
tr{
margin-top: 10px;
padding: 10px;
}
td{
margin-left: 2px;
}
這個設定其實,會沒有效果的,原因就是對於table來說,它有一個屬性值會設定是否當成一個整體來看,且其有設定table元素間距行距的屬性。
- border-collapse 屬性設定表格的邊框是否被合併為一個單一的邊框
屬性值 | 作用描述 |
---|---|
separate | 預設值。邊框會被分開。不會忽略 border-spacing 和 empty-cells 屬性。 |
collapse | 如果設定的話,邊框會合併為一個單一的邊框。會忽略 border-spacing 和 empty-cells 屬性。 |
inherit | 從父元素繼承 border-collapse 屬性的值,大多數為collapse |
- 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的行距。