CSS能夠改變表格(table)的樣式,包括行間距和列間距。本文將著重講述如何改變表格的列間距。
table { border-collapse: collapse; width: 100%; } td, th { padding: 10px; } td:first-child, th:first-child { padding-left: 20px; } td:last-child, th:last-child { padding-right: 20px; }
以上代碼是一個典型的CSS表格樣式代碼。表格元素(td和th)使用padding為單元格增加內間距。但列間距并未設置。
下面代碼就是可以改變列間距的CSS代碼:
table { border-collapse: collapse; width: 100%; border-spacing: 0px 20px; } td, th { padding: 10px; }
border-spacing屬性設置了表格的列間距,由兩個值組成,前一個值定義了水平方向上的間距,后一個值定義了垂直方向上的間距。以上例子中,水平間距設置為0px,垂直間距設置為20px。td和th元素的padding依舊保持不變。
如果需要單獨為某一列設置額外的間距,可以使用:first-child和:last-child偽類:
td:first-child { padding-left: 20px; } td:last-child { padding-right: 20px; }
以上代碼為第一列增加了左側間距為20px,為最后一列增加了右側間距為20px。
以上這些代碼就是通過CSS實現表格列間距變化的全部信息,通過這些內容我們可以實現表格樣式的變化。