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