CSS表格是網頁中經常使用的一種布局方式。為了讓表格更美觀、易讀,我們需要給表格添加一些樣式。其中,中間行間距是表格樣式中的一個較為重要的部分。
中間行間距即指表格中每隔一行之間的間距。如果不設置中間行間距,表格會顯得非常緊湊,難以閱讀。而設置了中間行間距之后,表格就會更加美觀易讀。
下面是一個CSS表格的基本樣式:
table{
border-collapse: collapse;
width: 100%;
text-align: center;
}
th, td{
border: 1px solid #ddd;
padding: 8px;
}
在上述代碼中,我們設置了表格的邊框樣式和單元格的內邊距。現在,我們需要在樣式表中添加中間行間距的樣式。
方法一:使用border-spacing屬性
table{
border-collapse: separate; /*改為separate*/
border-spacing: 0px 10px; /*添加border-spacing屬性*/
width: 100%;
text-align: center;
}
th, td{
border: 1px solid #ddd;
padding: 8px;
}
在上述代碼中,我們將表格的border-collapse屬性設置為separate,表示邊框與單元格之間是獨立的。然后,我們使用border-spacing屬性來設置中間行間距的大小,其中0px表示橫向間距為0,10px表示縱向間距為10像素。
方法二:使用tr:nth-child來設置間距
table{
border-collapse: collapse;
width: 100%;
text-align: center;
}
th, td{
border: 1px solid #ddd;
padding: 8px;
}
tr:nth-child(even){
background-color: #f2f2f2; /*添加背景色*/
height: 30px; /*設置行高*/
}
在上述代碼中,我們使用了偽類選擇器tr:nth-child來選中表格中的每隔一行。然后,我們為選中的行添加了背景色和行高,從而達到了設置中間行間距的效果。
總之,無論您是使用border-spacing屬性還是使用tr:nth-child來設置中間行間距,都可以讓表格變得更美觀易讀。
上一篇css 表格 高度
下一篇css 表格 最小寬度