網頁制作中,表格是常用的元素,但有時我們會發現表格周圍的間距太大或太小,影響了頁面的美觀性和排版。這時我們可以運用CSS的方法來進行表格間距的調整。
table{ margin:0; padding:0; border-collapse: collapse; border-spacing: 0; } td,th{ padding:8px; }
通過CSS中的代碼,我們可以將表格的外邊距、內邊距以及單元格的填充值都設置為0,達到去掉表格間距的效果。此時表格會變得十分緊湊,如果想要增加一定的間距,可以在單元格樣式中增加padding值。
除此之外,還可以設置表格的border-spacing屬性來調整表格單元格之間的間距。這個屬性值可以像margin一樣使用長度值或百分比值。
table{ border-collapse: separate; border-spacing: 10px; }
在代碼中,我們將border-collapse設置為separate,這是讓表格單元格的邊框分離開來,然后再通過border-spacing來設置單元格之間的間距。此時,表格的外邊距和內邊距就不再需要設置為0了。
最后,需要注意的是,不同的瀏覽器對于表格間距的處理方式可能會有所不同。有些瀏覽器對Table屬性支持的不是那么完全,如火狐瀏覽器會對Table中的邊框與間距處理不是很友好,而Chrome瀏覽器則是最友好的。
上一篇css去掉邊框還是有邊框
下一篇css去掉陰影樣式