色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css改變table列間距

丁秋燕1年前7瀏覽0評論

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實現表格列間距變化的全部信息,通過這些內容我們可以實現表格樣式的變化。