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

html-css012

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做不到......CSS只能做到让表格隔行颜色不同....如果说经过表格时颜色改变的话..可那在其他高版本的浏览器中能够实现或许..注意..只是说或许.因为我也没有利用高版本的浏览器...

做到兼容性上...还是利用JS来实现好点...

顺便说下.css实现隔行颜色不同的话...也是要页面输出table后..然后给tr加上不同class来实现的...然后指定class的css就可以了....

如果你是静态页面的话...用JS实现tr动态添加CLASS也行..但是如果你是PHP或者服务端语言输出的话...可以直接判断下....

比如..用三元运算符..?: ..这样是可以的.先判断前一个输出的是什么颜色..如果是..换色..如果不是则就指定这个颜色..

例外....推荐你一个JS库.jquery..它做的一个经典的一个例子就是实现表格的斑马线...具体怎么实现就不说了...网上方法.很多...自己找找吧..象这种的...动态输入就用三元运算符判断......或者JS来指定..但是那样很麻烦....