table.grid { border:1px solid #188ffe; margin:10px; } table.grid th { text-align:center; font-weight:bold; background-color:#188ffe; color:#fff; padding:5px; } table.grid a { padding:0px 5px; } table.grid a:link { text-decoration:none; } table.grid tr td { border-top:1px solid #e2ecff; border-left:1px solid #e2ecff; border-bottom:1px solid #a0cffe; border-right:1px solid #a0cffe; padding:3px 5px; } table.grid tr:nth-child(even) { background-color:#efefef; } .trh { height:0px; overflow:hidden; } .ccup,.ccdown { cursor:pointer; } .opFly { position:absolute; z-index:999; border-style:solid; border-left-color:#eef7fd; border-top-color:#eef7fd; border-right-color:#d3e9fc; border-bottom-color:#d3e9fc; background-color:#deeffc; }
网上找的table表格行上移下移都只是简单的把整行tr元素与相邻的before一下,实现位置交换而已。
上一个项目中客户提出不直观,不仔细看还不知道已经点过上移操作了,所以自己实现了一下过渡效果。
由于不是经常玩前台,想参考网上一些例子用 div和 ul li 去实现,结果发现table下不能这么整,还有tr 行的height这个高度直接改成0还不起效,经历了些麻烦,希望有朋友需要的直接拿去用或参考,少走些弯路。