在網頁設計中,表格是一個經常使用的元素之一。例如,用表格來展示商品數據、排名數據等等。
默認情況下,表格的文字會緊密地排在單元格內,這時候往往會顯得有些擁擠不夠美觀。如果不想改變表格單元格的大小,我們可以利用 CSS 來改變表格中文字的外部間距,使其呈適當的行間距。
下面是一種 CSS 實現的方式:我們可以針對表格的單元格內容(td
)來增加外部間距。
table { border-collapse: collapse; } td { padding: 20px; border: 1px solid #ccc; }
這段 CSS 代碼中,table
元素的border-collapse
屬性被設為了collapse
,這是為了讓表格中的邊框在單元格兩側連成線,從而顯得更加美觀。而td
元素的padding
屬性被設為了20px
,這是為了增加單元格內容與其周圍的外部間距。
此外,我們也可以使用line-height
屬性來控制表格中文字的行高,從而讓單元格內容更為清晰易讀。下面是一個例子:
td { padding: 20px; border: 1px solid #ccc; line-height: 1.5; }
這段 CSS 代碼中,我們在td
元素中添加了line-height:1.5
屬性,這表示單元格中行高是字體高度的 1.5 倍。通常情況下,保持行高與字體大小的比例為 1.5 左右是比較合適的。
通過以上 CSS 技巧,我們可以輕松地調整表格單元格內容之間的外部間距,讓整個表格在保證內容緊湊的同時也更加美觀易讀。
上一篇css表格文字與表框距離
下一篇css改變鼠標光標樣式