在網頁制作中,表格起到了非常重要的作用,而CSS樣式也是非常重要的一個環節。有時我們會發現表格的樣式過于花哨,影響網頁美感和用戶體驗,此時便需要清除表格的格式化。下面我們來講述一些常用的方法。
table { border-collapse: collapse; } td, th { border: none; padding: 0; margin: 0; font-size: inherit; font-weight: inherit; font-family: inherit; }
以上是最簡單的清除表格樣式的方法,只需要設置表格邊框為0,單元格間距為0,字體屬性繼承于父元素即可。但是如果表格樣式比較復雜,就需要用到更多的方法。
當我們想清除表格中的所有樣式時,可以使用reset.css。這是一種常見的清除瀏覽器默認樣式的方法,可以清除除chrome以外所有瀏覽器中默認的樣式(如邊距、padding、background等),不過要注意,可能會影響到其他元素的樣式。
/*reset.css*/ *{ margin:0; padding:0; border:0; font-size:100%; font-family: inherit; vertical-align:baseline; list-style:none; }
有時候我們想保留一些樣式,只想清除表格的邊框、背景色、文本對齊等。此時可以使用以下代碼。
table { border: none; background: none; text-align: left; border-collapse: collapse; } td { display: table-cell; vertical-align: top; border: none; padding: 0; margin: 0; font-size: inherit; font-weight: inherit; font-family: inherit; background-color: transparent; text-align: inherit; } th { display: table-cell; vertical-align: top; border: none; padding: 0; margin: 0; font-size: inherit; font-weight: inherit; font-family: inherit; background-color: transparent; text-align: inherit; }
以上就是關于如何清除表格格式化的方法,根據實際情況選擇適合的方法即可。