在網頁開發中,表格是一個非常重要的元素,特別是對于需要展示大量數據的網站。在表格中設置行(tr)之間的間隔,可以使整個表格更加美觀,也更加易于閱讀。那么,在CSS中,如何設置行(tr)之間的間隔呢?
首先,我們需要了解CSS中的border-collapse屬性。該屬性用于決定表格邊框是否合并為一個單一的邊框。如果設置了border-collapse為collapse,那么表格中的邊框就會合并為一個單一的邊框,此時再使用border-spacing屬性來設置行(tr)之間的間隔是無效的。因此,我們需要將border-collapse屬性設置為separate。
其次,我們需要使用border-spacing屬性來設置行(tr)之間的間隔。該屬性控制表格邊框之間的間距,可以同時設置水平方向和垂直方向的間距。通常,我們只需要設置垂直方向的間距即可。值得注意的是,該屬性只對設置為table-layout: fixed的表格起作用。
下面是一段設置行(tr)之間的間隔的示例代碼:
table { border-collapse: separate; border-spacing: 10px; table-layout: fixed; /*如果不需要固定表格寬度可以不加*/ } table td, table th { padding: 5px; border: 1px solid black; }在上述示例代碼中,我們將border-collapse設置為separate,將border-spacing設置為10px,這樣就能夠在每一行(tr)之間產生10像素的間隔了。同時,我們也設置了表格單元格(td或th)的內邊距為5像素,并設置了邊框為1像素的黑色實線。 綜上所述,通過設置border-collapse屬性為separate,再使用border-spacing屬性設置行(tr)之間的間隔,我們就可以輕松地美化表格,并使其更加易于閱讀。