Html+CSS | 1段CSS让表格更漂亮 建议收藏

html-css08

Html+CSS | 1段CSS让表格更漂亮 建议收藏,第1张

使用border-collapse: collapse去掉表格线间的空白。

使用:nth-child(even)选择表格中的偶数行,进行修改背景色,如果选择奇数行,使用odd选择奇数。

使用:last-of-type选择最后一个元素进行画表格底线

使用colspan进行行合并

使用rowspan进行列合并

table自带的border属行显得很生硬。建议请将table的cellspacing设置为1,然后给table设置一个背景,给所有的td设置白色背景,这样td和td之间空出来的一像素就会显示为table背景的颜色形成一种边框效果,宽度和颜色可以随意控制,甚至能使用图片。满意请采纳,谢谢!

CSS表格属性用于设置HTML表格的样式,HTML表格由 <table></table> 标签嵌套 <tbody>, <tr>, <td>等标签组成,一个HTML表格默认至少包含table,tbody,tr,td四个元素。

CSS表格属性:

显示表格边框有时候特别重要,它能让表格结构更清晰。

默认的表格有双边框,这是因为表和th/ td元素有独立的边界。border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开。