CSS表格是網頁設計中非常常用的一種元素。它可以幫助我們以直觀的方式呈現數據和信息。但是,很多時候我們需要給表格的每行設置不同的間距。接下來,我們將介紹如何通過CSS實現這個需求。
/* 給表格設置樣式 */ table { border-collapse: collapse; width: 100%; } /* 給表格每一行設置不同的間距 */ table tr:nth-child(odd) { height: 50px; } table tr:nth-child(even) { height: 100px; } /* 給表格單元格設置樣式 */ td { border: 1px solid #ccc; padding: 10px; text-align: center; }
如上所示,我們采用了CSS中的:nth-child選擇器給表格每一行設置不同的間距。其中,nth-child(odd)選擇器選擇了表格的奇數行,我們給它們設置了一個高度為50px的樣式;nth-child(even)選擇器選擇了表格的偶數行,我們給它們設置了一個高度為100px的樣式。
通過上述CSS代碼,我們已經成功地為表格的每一行設置了不同的間距。接下來,我們可以應用這個樣式來設計更加直觀美觀的網頁。
上一篇css表格行之間的間距
下一篇css插入圖片做背景